jQuery重用CSS-hover？ [关闭]

Posted 2023-03-06

【中文标题】jQuery重用CSS-hover？ [关闭]

【英文标题】：jQuery reuse of CSS-hover? [closed]

【发布时间】：2013-06-01 04:16:58

【问题描述】：

如果我有 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');
);

【问题讨论】：

既然 css 已经这么优雅了，为什么还要在 jQuery 中使用它？

当我看到这样的问题时，我只是摇头，拒绝做如此愚蠢的事情而没有正当理由，发表一个尖刻的评论并继续前进。

@xec：我编辑添加注释。

@Kolink：我编辑添加注释。

请重新打开，我觉得你不明白这个问题，但@SamuelLiew 是的（！），请参阅jsfiddle.net/uJXLG/1 了解。

【参考方案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

【讨论】：

非常感谢！是的！我将 JQuery 代码（您的 .addClass 指示）放入 jsfiddle.net/uJXLG/1 以便更好地说明（请将此链接添加到您的答案中以显示问题的重点，我们可以投票重新提出问题）

您的答案有重要线索，但我在jsfiddle.net/uJXLG/1 中添加的重要内容是“color: inherit; cursor: auto”，即“恢复默认”而不干扰原始布局的方式。

【参考方案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');
);

【讨论】：

谢谢，它会很好地说明...但是对于“真实插图”，您需要添加逻辑来检测“原始背景”，可以是白色或其他背景。

也许这有助于检测默认颜色：***.com/questions/5999209/…

查看@SamuelLiew 的简单解决方案，jsfiddle.net/uJXLG/1

太复杂了...需要css... :)

【参考方案3】：

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

jQuery(selector).hover

要不然直接放到css里面

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

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

否则你必须使用.hover函数

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

【讨论】：

什么是“动作监听器”？

所以，事件监听器，就像 .hover() is :)

@xec -- 是的，就像悬停一样。您不想要的“复杂”功能将是最简单的方法。正如帕特里克所说，第一个函数在鼠标进入时调用，第二个在鼠标离开时调用。不复杂:)

哈哈，这不是 xec 的问题...他表明我使用了错误的“术语”