Question

我有以下代码片段。悬停在Mozilla中有问题 - 它在悬停时会改变颜色，但有时候我们外出时它不会恢复。明白你有时只会发生。在这种情况下，如果我使用FireBug检查HTML我可以看到即使在悬停之后也分配了Extra Class。它在IE上工作正常。这是一个简化版本

另外你可以看到我在TR上设置颜色。但是这不会改变TR内部文本框上的颜色。如何确保TR中包含的控件的背景颜色也在悬停时更改。

 <style type="text/css">
        .HighLight
        {
            background-color:Fuchsia;
        }
        .Select
        {
            border:soild 2px Blue;
            margin:3px;
        }
        </style>
    <script type="text/javascript" src="jquery-1.4.2.js">

    </script>
    <script type="text/javascript">
        $(function() {
        $(".Select").hover(
            function() {
                $(this).addClass("HighLight");
            }, 
            function() {
                $(this).removeClass("HighLight");
            });
        });

ASP.NET Repeater Control生成的我的标记是一个TR指定了Class Select的表。

<tr class="Select" >
<td>
<input  type="checkbox" id="chkSelect" />
</td>
<td>
<input name="Repeater1$ctl11$tb" type="text" value="Sharp Bikes" id="Repeater1_ctl11_tb" />
</td>
<td>
<input name="Repeater1$ctl11$tb2" type="text" value="10/13/2004 11:15:07 AM" id="Repeater1_ctl11_tb2" />
</td>
</tr>

Answer 1

我想试试jQuery mouseover（addClass）和mouseout（removeClass）而不是

http://api.jquery.com/mouseover/

祝你好运，

弗拉维奥

Answer 2

好消息！我能够重新制作你的错误！

问题是你的jquery选择器正在使用“Select”类抓取所有元素。在悬停期间，您附加“Highlight”类，因此在一微秒内，jQuery将重写该元素的类定义，并偶尔将其从选择规则中删除。

尝试更改jQuery选择：

$(".Select").hover(...

为：

$("tr[class~='Select']").hover(...

或更好的是，更改悬停功能的内部以直接影响元素样式：

//...
function(){
  $(this).css('background',"fuchsia");
},
function(){
  $(this).css('background',''); //removes rule
}
//...

..真的？ Fuscia？！

Answer 3

如果生成此代码，那么jQuery代码可能不知道它。

您可能想尝试使用.live关键字，看看会发生什么。

此外，这可能不起作用，但我喜欢使用$(document).ready(而不是$(function(。个人偏好，但我从未遇到过这些问题。

Answer 4

您可以在Firefox中使用Firebug来了解问题所在。

您需要放置表格标签，例如this

JQuery Hover不适用于Mozilla

4 个答案: