悬停在另一个元素上时如何使一个元素悬停

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.box 上时，我需要div.link-box 的所有悬停动作。我只是在这里div.link-box 作为链接让您了解我的问题。但是，基本上它不仅仅是css更改。 那么，是否可以像 jQuery 的 div.box 一样，通过将鼠标悬停在另一个 div/button/link 上来实现所有 div.link-box 悬停动作？

Answer 1

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

Updated Fiddle

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

关于形容词选择器要记住的重要一点是两个 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

创建一个名为“hover”的 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');
    }
);