Question

我有以下代码在DIV的鼠标悬停事件中触发：

            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上，而没有类.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

如果type和ready类都在同一个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将有一个悬停事件。否则，什么都不会发生

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

修改

3 个答案: