Текст и его цвет прописаны в массиве words_array
. При наведение меняется соответственно и текст и его цвет.
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
var counter = 0;
function getWordColor() {
var words_array = [
["one", "red"],
["two", "yellow"],
["three", "green"]
];
function getCount() {
if(counter < (words_array.length - 1)) {
counter += 1;
} else {
counter = 0;
}
return counter;
}
return words_array[getCount()];
}
$("#text").hover(function() {
var word_color = getWordColor();
$(this).text(word_color[0]);
$(this).css("color", word_color[1]);
});
});
</script>
</head>
<body>
<span id="text">test</span>
</body>
</html>
В css содержимое элемента можно менять через правило content
, а определить правило применяемое к тегу во время наведения на него мыши можно через псевдокласс :hover
. Например:
.class {
/* Правило по умолчанию */
}
.class:hover {
/* Правило по наведению курсора */
}