jQuery重用CSS-hover？ [关闭]

Question

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

---

“FAST ATTACK”结束问题后的注意事项：@SamuelLiew 的解决方案使用 1 行 jQuery 代码运行，http://jsfiddle.net/uJXLG/1/

---

注意事项

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

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

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

加强

拜托，简单点

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

不是说给我用的

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

这很复杂。

---

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

下面的代码比@SamuelLiew 建议的a single .addClass command 更复杂（！！）。这是因为 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');
});

Answer 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

Answer 2

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

$.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');
});

Answer 3

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

jQuery(selector).hover

要不然直接放到css里面

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

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

否则你必须使用.hover函数

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