當懸停在另一個元素上時如何使一個元素懸停

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