-7

如果我有这样的 CSS p:hover {background-color:yellow}......如何用 jQuery 做完全相同的事情？不，没有一组复杂的函数调用和属性检测，但是如何让jQuery重用这个通用的浏览器内置功能呢？

“快速攻击”结束问题后的注意事项：se @SamuelLiew 的解决方案使用 1 行 jQuery 代码操作，位于http://jsfiddle.net/uJXLG/1/

笔记

这个问题是关于REUSE（浏览器内置功能），示例代码只是说明。

为什么我需要 jQuery（而不是“纯 CSS”）？

使用“纯 CSS”不允许应用逻辑。示例：1）激活和停用 CSS houver 的事件；2) 复杂的选择器逻辑。

加强

Plase，一些简单的事情

$('p:hover').css('color','red'); （不运行）...

不说我用

$('a').hover(function(){
          $(this).css('color', 'red');
     },function(){
         ...
     }
);

这是非常复杂的。

在@nevermind 之后编辑（请参阅用户的回答）：

正如@SamuelLiew 所建议的，下面的代码比单个.addClass命令更复杂（！！）。这是因为 SamuelLiew 的代码重用了浏览器的渲染行为。

var old_background; // to memorize original background

$.fn.hover_it = function(overcolor) { // TOO COMPLEX CODE AND OVERHEAD FOR DOM!!
    $(this).hover(function(){
        old_background = $(this).css("background-color");
        $(this).css("background-color",overcolor);
    },function(){
        $(this).css("background-color",old_background);
    });
}
 
$(document).ready(function() {
    $('p').hover_it('red');
});
4

3 回答 3

1

他们的想法是行不通的。你必须使用

jQuery(selector).hover

否则，只需将其放入 css 中。

第一个功能是在你进入的时候，第二个是在你离开的时候，并没有那么复杂。只需将您需要运行的代码放入正确的代码中即可。

如果您只需要更改悬停元素的 css 样式，只需使用 css。

否则你必须使用该.hover功能

您可以使用动作侦听器，但这同样“复杂”

于 2013-06-05T12:54:34.897 回答
1

1) 激活和停用 CSS houver 的事件；2) 复杂的选择器逻辑。

在上面提到的两个例子中，你仍然可以使用 CSS 类。只需使用 jQuery 为覆盖默认悬停功能的特殊定义的类执行 toggleClass。

例如，你有这个：

.myElement {
    color: green;
}
.myElement:hover {
    color: red;
}

只需添加此类：

.myElement.disabled {
    color: green;
}

调用.toggleClass('disabled')或调用.addClass('disabled')任何使您的逻辑失败或触发您的事件的元素。

见http://jsfiddle.net/samliew/NMmLN

于 2013-06-05T15:25:55.337 回答
0

这是一个解决方案 - 我创建了一个“复杂”函数和一个如何使用它的示例：

$.fn.hover_it = function(over,out) { 
    $(this).hover(function(){
        $(this).css("background-color",over);
    },function(){
        $(this).css("background-color",out);
    });  
}

$(document).ready(function() {
    //usage
    $('p').hover_it('red','blue');
});
于 2013-06-05T13:10:06.967 回答