Psuedo选择器:悬停，但仅当DIV具有特定类时

Question

我有以下代码，它是在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 */ }

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

编辑

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

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

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

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

这可能吗？

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

这样只有那些拥有ready类的div才会有悬停事件。否则，将不会发生任何事情