При помощи CSS и JavaScript.
Допустим, есть пять различных текстов. При наведении курсора на <текст1>, он меняеться на <текст2> и остаётся в таком состоянии. При повторном наведении уже на <текст2> появляется <текст3>
на <текст3> - <текст4>
на <текст4> - <текст5>
на <текст5> - <текст1>, т.е. зацикливается по кругу.
Я обычно делаю так:
Например, кусок разметки:
<div class="swap text1">
<span class="text1">текст 1<span><span class="text2">текст 2<span><span class="text3">текст 3<span><span class="text4">текст 4<span><span class="text5">текст 5<span>
</div>
Стиль:
div.swap span {
display: none;
}
div.text1 span.text1,
div.text2 span.text2,
div.text3 span.text3,
div.text4 span.text4,
div.text5 span.text5 {
display: inline;
}
хинт в том, что все span-ы скрыты по умолчанию и появляются только тогда, когда их класс совпадет с классом родителя.
Теперь скрипт на базе jQuery
http://jquery.com/$(function () {
var i = 1;
$('div.sel').mouseover(function () {
i = i + 1;
$(this).removeClass('text1 text2 text3 text4 text5');
$(this).addClass('text' + i);
});
