Question

我需要这样一个场景，如果有人在一个div上盘旋，另一个div将会悬停。就像：

HTML

<div class="box"></div>
<div class="link-box">
   <a href="#">Touch the Grey Box and I get hovered!</a>
</div>

CSS：

.link-box a:hover {
    color: red;
}

Foddle Work

如果有人悬停在div.box上，div.link-box会被徘徊，我的意思是得到红色。可能吗？请不要像这样的CSS方式告诉它：

.box:hover .link-box a {
   color: red;
}

我的情景不是这样的。我的情况比较复杂。所以，只有jQuery才有可能。由于我不擅长jQuery，我无法编写脚本。这就是我需要你帮助的原因。什么是它的jQuery？可能是这样的吗？

$('.box').hover(function(){
   $('.link-box').hover();
});

.............................................. 更新 ..................................

所有答案都与CSS有关。基本上，div.link-box在我的网页上是如此复杂的div，如果有人在div.link-box发生了很多动作，就像弹出框一样，div.link-box的多个子元素会发生变化。一切都发生在jQuery + CSS上。当有人在div.link-box上空盘旋时，我需要div.box的所有悬停行动。我只是在这里div.link-box作为链接让你理解我的问题。但是，基本上它不仅仅是改变css。 那么，是否可以将所有div.link-box悬停操作悬停在另一个div /按钮/链接上，就像jQuery 的div.box一样？

Answer 1

只要它们保持相同的布局，您就可以在css中使用相邻的选择器（+）。

Updated Fiddle

.link-box a:hover, .box:hover + .link-box a{
    color: red;
}

要记住关于adject选择器的重要事项是两个div必须具有相同的父级，并且该框必须紧接在第二个div之前。

More information on the adjacent selector

编辑：

另一种选择是将两个div包装在另一个div中，并使用包装器div的悬停。

第二个选项没有使用相邻选择器的缺点。只要锚点位于包装器内部的任何位置，当包装器的任何部分悬停时，它将被设置为样式。

FIDDLE

像这样：

<div class='box-wrapper'>
    <div class="box"></div>
    <div class="link-box"> <a href="#">Touch the Grey Box and I get hovered!</a>
    </div>
</div>

具有以下样式：

.box-wrapper:hover a {
    color: red;
}

Answer 2

创建一个名为＆＃34; hover＆＃34;的CSS类。（影响到您a使其成为.hover a）

.hover a
{
  color: red;
}

然后你的JQuery会读到：

$('.box').hover(function(){
  $(".link-box").toggleClass("hover");
});

Answer 3

而不是:hover css选择器，我会使用类。

CSS：

.hover{
    color:red;
}

JS：

$('.box').hover(
    function(){
        $('.link-box').addClass('.hover');
    },
    function(){
        $('.link-box').removeClass('hover');
    }
);

当悬停在其他元素上时，如何使一个元素悬停

3 个答案: