0

mouseover我有以下在a 事件中触发的代码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 */ }

因此，如果鼠标悬停在divs 上而他们没有class .ready，那么什么都不会发生。这可能吗？我只是想切换到 CSS 来加快页面上的用户交互，因为有时鼠标在离开或进入 a 时会卡住div，我认为这可能是因为这个改变类的 jQuery。我对吗？

编辑

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

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

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

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

这可能吗？

4

3 回答 3

3

如果 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 */ }
于 2013-02-08T17:08:35.987 回答
1

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

于 2013-02-08T17:09:01.993 回答
0

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

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

这样，只有那些具有就绪类的 div 才会有悬停事件。否则什么都不会发生

于 2013-02-08T17:45:14.963 回答