觸發多層元素的懸停行爲

我有一個頁面，我有一個網格的圖像。這些圖像的不透明度最初設置爲零（即，它們隱藏）。當鼠標移動到圖像上時，其不透明度立即設置爲1，並且當鼠標移開時，其不透明度迅速消失爲零。相關的代碼看起來像這樣：觸發多層元素的懸停行爲

HTML

<img class="Image" src="./img/foo.png">

CSS

.Image { 
    opacity: 0; 
}

JS現在

$(".CircleImage").hover(
    function() { 
     $(this).fadeTo(0,1); // mouseenter 
    }, 
    function() { 
     $(this).fadeTo(200,0); // mouseleave 
    } 
);

：我想補充一些鏈接，將上面顯示這個網格的圖像。這裏有一個問題：我希望圖像保持其懸停行爲。真正棘手的是每個鏈接的文本將跨越多個圖像，並且鏈接文本和圖像的大小隨着窗口大小而動態地改變。例如，假設我有一個鏈接，其文本是「點擊我」，並且在一個特定的窗口大小下，「點擊」的「cli」在一個圖像上，而「我」在另一個圖像上。我希望頁面的行爲如此：當鼠標懸停在「cli」下面的圖像出現時，當它位於「我」的下方時，圖像下方的圖像出現，並且可以點擊鏈接。

也就是說：我希望懸停行爲不僅可以觸發頂層元素，也可以觸發頂層元素。

有沒有人有任何建議，我怎麼能做到這一點？

來源

2012-06-29 jkjenner

你能顯示實際的標記是什麼樣子？這聽起來可能，取決於你的標記。 – Mathletics

@jkjenner這聽起來像你已經搞清楚了。你甚至使用了「trigger」這個詞，這正是你所需要的。 ''（'。CircleImage'）。trigger（'hover'）' – Ohgodwhy

@Ohgodwhy我不認爲你可以觸發'hover'，因爲它實際上是'mouseover'和'mouseout'。 'hover（）'只是'bind（'mouseover'，function（）{}）。bind（'mouseout'，function（）{}）'的簡寫函數。 – Mathletics

您可以將圖像和鏈接包裝在容器中，並更改該容器的不透明度。

<span class="imgContainer"> 
    <a href="#">X</a> 
    <img class="Image" src="./img/foo.png" width="100" height="100"> 
</span> 

.imgContainer { 
    opacity: 0.1; 
    width: 100px; 
    height: 100px; 
} 

.imgContainer a { 
    position: absolute; 
}

DEMO

來源

2012-06-29 15:17:02 sachleen

感謝您的回覆。這與我之後的內容非常接近，但是：在大多數情況下，鏈接文本將跨越多個圖像。因此，根據人們在鏈接上懸停的位置，可能需要顯示或隱藏各種圖像。我會編輯我的問題，使其更清楚。 – jkjenner

觸發多層元素的懸停行爲

回答

相關問題