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

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;
}

抚摸工作

如果有人将鼠标悬停在div.box ，则div.link-box将会悬停，我的意思是获得红色。 可能吗？ 请不要这样说：

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

我的情况不是这样。 我的情况比较复杂。 因此，只有使用jQuery才有可能。 由于我不擅长jQuery，因此无法编写脚本。 这就是为什么我需要您的帮助。 jQuery是做什么用的？ 可能是这样的吗？

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

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

所有的答案都与CSS有关。 基本上， div.link-box在我的网页上是如此复杂，如果有人将鼠标悬停在div.link-box上， div.link-box发生许多操作，例如弹出框即将到来， div.link-box多个子元素将发生变化。 一切都发生在jQuery + CSS上。 当有人将鼠标悬停在div.box上时，我需要div.link-box所有悬停动作。 我只是在这里将div.link-box作为链接，以使您了解我的问题。 但是，基本上不只是CSS更改。 因此，是否有可能像jQuery的div.box一样，通过将所有div.link-box悬停动作带到另一个div / button / link div.box ？

Answer 1

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

更新小提琴

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

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

有关相邻选择器的更多信息

编辑：

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

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

小提琴

像这样：

<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

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