如何讓一個元素懸停在其他元素上時懸停

我需要這樣一個場景，如果有人將鼠標懸停在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的改變。 那麼，是否有可能將所有div.link-box盤旋動作懸停在另一個div/button/link上，就像div.box by jQuery？

來源

2014-07-11 user1896653

問題的可能的複製：http://stackoverflow.com/questions/13325519/jquery-trigger-a-hover-event-from-另一個元素？ –

您可能可以根據自己的需要改編http://stackoverflow.com/a/5199243/212869。只是CSS和沒有jQuery。 – NickSlash

是的，這是一種重複的問題#anthonymasi。我沒有得到我的解決方案/無法理解該解決方案。這就是爲什麼，我發佈類似的問題與我的問題 – user1896653

只要他們留在相同的佈局，您可以使用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; 
}

來源

2014-07-11 16:21:48 Smeegs

Upvote @smeegs，我也很好奇這個問題。我嘗試了小提琴。有沒有什麼辦法可以保持懸停在盒子上的積極性？正如我可以檢查，即使在頁面的最遠角落，它也會被激活。不要採取其他方式。 –

@KhushalDave，我假設你在談論第二個小提琴，我更新了鏈接，以便將其限制爲div http://jsfiddle.net/aHe7b/6/ – Smeegs

看起來很完美。 :) –

創建一個名爲「懸停」 CSS類（影響你a使其.hover a）

.hover a 
{ 
    color: red; 
}

然後你JQuery的內容如下：

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

來源

2014-07-11 16:22:34

取而代之的是:hover CSS選擇，我會使用類。

CSS：

.hover{ 
    color:red; 
}

JS：

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

來源

2014-07-11 16:23:20

如何讓一個元素懸停在其他元素上時懸停

回答

相關問題