如何將圖像翻轉與鏈接翻轉連接？

Question

如何設置鏈接/圖像，以便當您懸停圖像時，頁面上的鏈接變爲懸停狀態，反之亦然？

到這個網站也有類似的： http://www.adrianlawrence.co.nz/

任何幫助將是巨大的！

謝謝！

Answer 1

您可以附加一個事件偵聽器到一個（圖像或鏈接）來偵聽鼠標懸停。有一個函數，它會找到匹配的ID元素（圖像和鏈接匹配，即圖像ID =「image1」，鏈接ID =「link1」），並更改CSS。

Answer 2

純CSS和HTML絕對可以用來創建類似於您鏈接到的網站的效果。

結賬this fiddle。

1. 將您的鏈接文字和圖片放在一個a元素內。
2. 給你的每個圖像一個不同的ID。
3. 使用CSS將您的圖像絕對（或相對而言，您的電話）定位在所需的位置。

的HTML：

<a href="www.google.com"> 
    Hello there. 
    <img id="img1" src="[SOURCE]" alt="Be Happy!" /> 
</a>​ 

的CSS：

/* The Important Stuff */ 

#img1 { 
    position:absolute; 
    bottom:20px; 
    right:45px; 
} 

a:hover { 
    text-decoration:none; 
} 

a:hover img { 
    opacity:.8; 
} 

/* The Unimportant Stuff */ 

body { 
    background-color:black; 
} 

a { 
    color:white; 
}