在鼠标移开和鼠标移开时更改div元素文本的文本颜色

Question

我想在鼠标悬停和鼠标移出时更改文本颜色.由于div元素的内部数量,它不起作用.请帮助,如果有的话.

<div class="u860" id="u860" style="top: 0px;">
    <div id="u860_rtf">
        <p style="text-align: left;" id="cache228">
        <a class="music" href="AppLauncher_TradeSearch">
            <span class="test1" style="font-family: Calibri; font-size: 11px; 
                font-weight: bold; font-style: normal; text-decoration: none; 
                color: rgb(37, 80, 99);" id="cache229">Different</span>
        </a>
        </p>
    </div>
</div>

"不同"的颜色应该反复变化.

Answer 1

这些情况下的最佳解决方案是使用CSS,

.test1:hover{
    color:red !important;
} 

在这里演示

不太好的是添加一个类,如:

$('.test1').hover(function () {
    $(this).addClass('newColor');
},
function () {
    $(this).removeClass('newColor');
});

在这里演示

和最后一个选项:

$('.test1').hover(function () {
    $(this).css('color', 'red');
},
function () {
    $(this).css('color', 'rgb(37, 80, 99)');
});

在这里演示