:悬停选择器不适用于jQuery 1.4

Question

用Google搜索 - 没有发现任何东西.我在谈论CSS:悬停,而不是jQuery .hover().所以,代码:

$('#something a:hover').css({'something': 'thomesing'});

适用于1.3,但不适用于1.4.怎么解决？

Answer 1

遵循规则
这是一个极好的例子,说明为什么我们必须始终根据文档进行编码,而不是根据可能性进行编码.黑客,或者像这样的疏忽,最终会被淘汰出局.

正确的jQuery(普通的css更好)方法如下:

$("#something a").hover(
    function() { 
        // $(this).addClass("hovered");
        $(this).css("color", "red");   
    },
    function() { 
        // $(this).removeClass("hovered");
        $(this).css("color", "black"); 
    }
);

该$.fn.hover方法最多使用两个参数,并作为更明确的指针(鼠标)事件的语法糖.事实上,jQuery 2.1.0中的悬停方法只不过是这样:

function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

理解你的代码,并简洁
如你所见,fnOver当你输入元素时调用该函数,当你退出时再调用该函数(如果没有提供其他方法).有了这个理解,我们可以设置更简单的指令:

$("#something a").hover(function () {
    $(this).toggleClass("hovered");
});

本土几乎总是赢得
最终,香草CSS是要走的路.该:hover伪类已经存在很长一段时间,并与目标不仅是元素它所属,但嵌套的元素也有效:

#something a:hover {
    background: red;
}

#something a:hover .icon {
    animation: 2s rotate ease-out;
}

有了广泛支持的东西:hover,我认为没有理由避免它.

Answer 2

:hover不是文档伪类选择器.

试试这个:

$('#something a').hover(function(){
                          $(this).css({'something': 'thomesing'});
                      },
                      function(){
                          $(this).css({'something': 'previous'});
                      });

虽然,你最好使用CSS类:

$('#something a').hover(function(){
                          $(this).toggleClass("over").toggleClass("out");
                      },
                      function(){
                          $(this).toggleClass("over").toggleClass("out");
                      });

http://docs.jquery.com/Events/hover

编辑:

在下面的BlueRaja评论中,以下内容更合适:

$('#something a').hover(function(){
                          $(this).addClass("over").removeClass("out");
                      },
                      function(){
                          $(this).removeClass("over").addClass("out");
                      });