伪选择器：悬停但仅当 DIV 具有特定类时答案

【问题标题】：Psuedo selector :hover but only when a DIV has a specific class伪选择器：悬停但仅当 DIV 具有特定类时
【发布时间】：2013-01-24 12:23:13
【问题描述】：

我在DIV 的mouseover 事件上触发了以下代码：

if(!$this.hasClass('ready')) 
{   if($this.hasClass('activated'))
    {
        $this.removeClass('activated');
    }
    $this.addClass('ready');
}

还有更多代码，但它基本上遵循与上面相同的概念模式。我检查一个类的存在，只有当那个类存在时，我才会添加或删除其他类。这发生在mouseover，而其他事情发生在mouseout。所以有人建议我只使用 CSS 和 :hover。但是我有两种不同类型的DIV，一种类型包含文本，因此是“textBox”类，另一种包含图像，因此是“imgBox”类。

我想做这样的事情：

div.imgBox .ready:hover
{ /* some style */ }

div.textBox .ready:hover
{ /* some style */ }

因此，如果鼠标悬停在divs 上，而它们不具有.ready 类，则不会发生任何事情。这可能吗？我只是想切换到 CSS 以加快页面上的用户交互，因为有时鼠标在离开或输入div 时会卡住，我认为这可能是因为这个类改变 jQuery。我说的对吗？

编辑

我忘了添加问题的一个重要部分——嵌套元素呢？我的意思是，我有一个 div 可以在 hover 上调整大小，当这种情况发生时，我希望以前透明的调整大小手柄获得彩色背景。

<div class='imgbox'>
<div class='ui-resizable-se'></div>
...
</div>

所以我的意思是在概念上类似于：

.imgbox:hover{ .ui-resizable-se { /*some style */ } }

这可能吗？

【问题讨论】：

你能添加你的标记吗？

标签： jquery css css-selectors jquery-events pseudo-class

【解决方案1】：

如果类型和就绪类都在同一个div上，则需要去掉两个类之间的空格：

div.imgBox.ready:hover
{ /* some style */ }

div.textBox.ready:hover
{ /* some style */ }

如果您需要设置嵌套元素的样式，只需在:hover 部分之后添加一个空格：

div.imgBox.ready:hover .ui-resizable-se
{ /* some style */ }

【讨论】：

我有一个问题。如果我应用这个 CSS，它是否比通过 jQuery 做同样的事情更有效/更快？
是的。 CSS 总是更快。

【解决方案2】：

您不能使用 CSS 添加或删除类。您只能根据 CSS 属性添加或删除样式。因此，如果您想在鼠标悬停时修改某些div 的外观，您必须明确指定样式。

【讨论】：

【解决方案3】：

您应该在悬停定义上指定：

$('div.ready').hover() {
    // Your code goes here
}

这样只有那些有 ready 类的 div 会有悬停事件。否则什么都不会发生

【讨论】：