如何做圖像鼠標懸停效果？

當我將鼠標懸停在當前圖像上時，如何更改我的代碼以允許它更改圖像？如何做圖像鼠標懸停效果？

我想改變形象坐在我的網頁的body：

<body> 

<!-- Here's myImage!--> 
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">

，我想這個形象的比方，當你將鼠標懸停在myImage.jpg改變以全新的形象，anotherImage.jpg。我試圖在其他地方找到幫助，但沒有成功。

來源

2016-04-02 toadflax

您可以使用javascript的onmouseover事件，但在可能的情況下最好使用CSS。

下面是一個可能的解決方案演示：(Edit on Codepen)

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 400px; 
 
    margin-left: 50px; 
 
} 
 
.container:hover img:nth-of-type(2) { 
 
    opacity: 1; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 600px; 
 
    height: 400px; 
 
    transition: opacity 1s ease-in-out 0s; 
 
} 
 
.container img:nth-of-type(1) { 
 
    opacity: 1; 
 
} 
 
.container img:nth-of-type(2) { 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <img src="https://placeimg.com/600/400/animals" /> 
 
    <img src="https://placeimg.com/600/400/people" /> 
 
</div>

基本上，在此工作原理是，將兩個圖像是由通過CSS相同的大小，並且放置方式彼此之上（這就是絕對定位）。當用戶沒有懸停在其上時，第二個圖像的不透明度爲0（nth-of-type(2)選擇器選擇該類型的第二個元素），因此它不可見，並且第一個圖像的不透明度爲1，所以它是可見。當用戶懸停在它上面時，第二個被賦予1的不透明度，所以它變得完全可見，並且因爲它們都是相同的大小並且在彼此之上，所以第一個被第二個覆蓋。這意味着當您將鼠標懸停在圖像上時，圖像會發生變化。

這樣做的另一個好處是，正如您在演示中看到的那樣，它是完全可動的！其他解決方案（如使用display: none或背景圖像）不能與CSS轉換一起使用，因爲它們不是可動畫屬性，但不透明度是可以動畫的，因此您可以創建像這樣的轉換！祝你好運！

如果您不明白我的解釋如何工作，請隨時要求澄清！

來源

2016-04-03 00:08:31

這很好用，謝謝！我雖然有一個小問題，你知道爲什麼當我試圖編輯圖像的位置（通過填充，頂部，左側等），他們不動嗎？目前他們在左上角，但我需要移動他們，但是這樣做有輕微問題。 – toadflax

您需要移動整個div.content才能移動，移動單個圖像時請停止使用XP。那對你有用嗎？ **編輯：我已經編輯了上面的演示，告訴你如何移動它！** –

這個工作完美，謝謝！只是一個簡短的問題，是否有可能移動**在**中淡出的圖像？即**之後的圖像**您在鼠標懸停前看到的圖像。 – toadflax

在你的CSS中，讓第一個類包含第一個圖像。然後第二課將成爲課程名稱+懸停。 EX。 .CLASSNAME：懸停{}

#NAME { 
    background-image: url('LibraryTransparent.png'); 
    height: 70px; 
    width: 120px; 
} 

#NAME:hover { 
    background-image: url('LibraryHoverTrans.png'); 
}

來源

2016-04-02 23:46:21 DolbyOver

雖然這在技術上有效，但它對於語義來說可能並不總是很好...背景圖像不是內容，它們是樣式，而實際圖像是實際內容的一部分。 XP –

如果你可以添加兩個圖像到<span>標籤左右，你可以這樣做：

span img:last-child { 
 
    display: none; 
 
} 
 
span:hover img:first-child { 
 
    display: none; 
 
} 
 
span:hover img:last-child { 
 
    display: inline-block; 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
    <img src="http://lorempixel.com/300/150/sports/2"> 
 
</span>

或者，使用僞元素爲第二個圖像。

span:hover img { 
 
    display: none; 
 
} 
 
span:hover:after { 
 
    content: url("http://lorempixel.com/300/150/sports/2"); 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
</span>

用於進/出效果的一些基本的褪色例如見本jsFiddle。

來源

2016-04-03 00:01:51 Stickers

+1爲僞元素示例！這是一個聰明的用法！雖然這確實意味着圖像只在懸停時才加載？我想，它可以被重新調整，使其加載頁面的其餘部分的圖像？這可能會更好，因此慢速連接的人不必在加載時受到阻礙。僞元素的想法雖然巧妙！ xP –

謝謝，它只在第二種方法中懸停加載。但可以根據需要進行修改。只是提出一些想法，並希望保持簡單的例子。 – Stickers

如何做圖像鼠標懸停效果？

回答

相關問題