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

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

HTML

如果有人将鼠标悬停在

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，如果有人在

div.link-box

上悬停，就会发生很多动作，比如弹出框出现，那么

div.link-box

的多个子元素就会改变。所有这些都发生在jQuery+CSS上。当任何人在

div.box

上悬停时，我需要

div.link-box

的所有悬停动作。我只是把这里的

div.link-box

作为一个链接，让您了解我的问题。但是，基本上这不仅仅是css的改变那么，是否可以将所有的

div.link-box

悬停动作悬停在另一个div/按钮/链接上，就像jQuery的

div.box

一样？

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

+

）

关于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>

创建一个名为“hover”的CSS类（影响您

a

使其

。hover a

）

然后您的JQuery将显示：

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

---

我将使用类而不是

：hover

css选择器

CSS:

JS:

---

问题可能重复：？您可能能够适应您的需要。只有CSS，没有jQuery。是的，这是一种重复的问题#anthonymasi。我没有我的解决方案/无法理解那个解决方案。这就是为什么，我在problemUpvote@smeegs上发布了类似的问题，我对这个问题也很好奇。我试过小提琴。有没有什么方法可以让悬停只停留在盒子里。我可以检查一下，即使在页面的最远一角，它也会被激活。？？别这么认为。@KhushalDave，我想你说的是第二把小提琴，我更新了链接，使其仅限于看起来完美的div。：）

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

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

.hover a
{
  color: red;
}

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

.hover{
    color:red;
}

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