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;
}

演示here

不太好的是添加一个类，如：

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

演示here

和最后一个选项：

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

演示here

Answer 2

试试这个css：

.u860:hover a, .u860:hover span {
    color:red !important;
}

你正在使用span中的样式，所以你必须使用！important。

demo

Answer 3

试试这个：

  $(".u860").mouseover(function(){
    $(".u860").css("background-color","cyan");
  });$(".u860").mouseout(function(){
    $(".u860").css("background-color","gray");
  });

http://jsfiddle.net/emdhie/WV5v6/

Answer 4

嗨Hmnshu我没有看到悬停css的代码.. 试试这个。

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <style>
   span{
        font-family: Calibri; 
        font-size: 11px; 
        font-weight: bold; 
        font-style: normal; 
        text-decoration: none; 
        color: rgb(37, 80, 99);
       }
  span:hover{
       color: rgb(0, 0, 0);
       }
 </style>
 </head>
 <body>
 <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"  id="cache229">Different</span>
    </a>
   </p>
 </div>
</div>
</body>
</html>

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

4 个答案:

演示here