如何讓懸停在一個div上觸發另一個div的更改？

我期待創造我的下一個網站的下一個效果：如何讓懸停在一個div上觸發另一個div的更改？

我有3倍的DIV在左欄一些文本內容。
我在右欄中的div中有一個圖像。
右側div中的圖像有3個不同的獨立圖像部分，當我將鼠標懸停在左側列中的某個div（與特定圖像部分相關）上時，每個獨立部分都必須高亮顯示。我盤旋的DIV必須在懸停時突出顯示。
我也想同樣的效果，只是這次我將鼠標懸停在DIV中右邊欄中的任何圖像部分上。我希望它突出顯示相關的div，並突出顯示圖像部分本身。

我知道這一切可能聽起來很混亂，所以我做了一張照片，希望能夠在視覺上解釋我的項目。（檢查附加的圖像）。

現在，我不知道這是否可以單獨僅利用CSS，或者通過CSS和jQuery或SMN的組合來實現。

如果有誰遇到過類似的實現，或者知道哪裏可以找到一個代碼示例，或可以直接我在正確的方向，我將不勝感激！

來源

2012-03-23 Acidon

不錯的鼠標，我應該使用這個圖標作爲我的指針=） – cctan 2012-03-23 04:01:22

你可以設置你的大陸圖像鼠標懸停綁定和左其相應的div：

$('.div1').mouseover(hoverOne); 
$('.continent1').mouseover(hoverOne); 
var hoverOne = function(){ 
    //hightlight elements 
} 

//lather...rinse...repeat for the rest

來源

2012-03-23 04:05:24 KodeKreachor

這樣的事情應該工作。請參閱http://jsfiddle.net/neo108/fCsNN/。

只需指定div的在地圖中的相關部分在mouseout和mouseover功能。

來源

2012-03-23 05:34:05 neo108

謝謝，它看起來非常接近我正在尋找的東西。「你的意思是」在mouseout和mouseover函數中爲你的地圖中的相關部分指定你的div「，請問你能提供一些例子嗎？ – Acidon 2012-03-23 15:23:18

我的意思是 - 從你的照片上面，爲2）指定南美洲的div。說你稱它爲「samerica」。當您將鼠標懸停在Div 1上時，您可以應用$（'＃samerica'）.css（'background-color'，'＃F7FE2E'）;'。當你彈出時，你應用原始背景。 – neo108 2012-03-23 20:51:52

這個例子效率很低。通過使用類或類似的東西，通過css應用背景也會更好，而不是用'jQuery.css'函數實際操縱bg的顏色。 – prodigitalson 2012-03-24 03:17:16

如何讓懸停在一個div上觸發另一個div的更改？

回答

相關問題