將鼠標懸停在原始圖像上時顯示背景圖像

當鼠標懸停在原始圖像上時顯示背景圖像，並且在不再懸停在原始圖像上時背景圖像消失時，顯示背景圖像。下面是我的HTML和CSS的片段。是否沒有簡單的CSS命令說「隱藏原始圖像」或「顯示背景圖像」？將鼠標懸停在原始圖像上時顯示背景圖像

.wildlife img { 
 
\t padding:0; 
 
\t margin:0; 
 
\t width:48%; 
 
\t height:auto; 
 
\t float:left; 
 
\t background-image: url("http://placekitten.com/300/200"); 
 
}

<div class="wildlife"> 
 
\t \t \t 
 
<a href=""><img src="http://placekitten.com/g/300/200" /></a> 
 
\t \t \t 
 
</div>

來源

2016-04-13 T Corin

您需要使用JavaScript來實現這一 – Erick

@Erick感謝。你會知道如何？使用onhover還是onmouseover？ –

正如上面提到的，你可以用JS來實現這一目標。請參見下面的鏈接的示例：

http://jsfiddle.net/wbox6khc/52/

<div class="wildlife"> 

<a href=""><img src='http://placekitten.com/g/300/200' onmouseover="this.src='http://placekitten.com/300/200';" onmouseout="this.src='http://placekitten.com/g/300/200';"/></a>

來源

2016-04-13 02:36:06 ttunstall

您可以添加樣式到<a>標籤，當你在它懸停，像這樣：

.wildlife a { 
 
    background: url('http://placekitten.com/300/200') no-repeat 0 0 scroll; 
 
    display: inline-block 
 
} 
 

 
.wildlife a img { 
 
    display: inline-block; 
 
} 
 

 
.wildlife a:hover img { 
 
    visibility: hidden; 
 
}

<div class="wildlife"> 
 
    <a href="#"> 
 
    <img src="http://placekitten.com/g/300/200" alt="kitty"> 
 
    </a> 
 
</div>

沒有必要的JS。

來源

2016-04-13 02:45:02 dork

您仍然可以使用純CSS來做到這一點，但您需要爲您的div設置width和height，請查看下面的代碼片段。

.wildlife{ 
 
    width:300px; 
 
    height: 300px; 
 
    float:left; 
 
    content:""; 
 
    background: url("http://placekitten.com/300/200") no-repeat; 
 
    background-size:cover; 
 
    background-position: center center; 
 
    transition: all 0.4s; 
 
    -webkit-transition: all 0.4s; 
 
    cursor: pointer; 
 
} 
 
.wildlife:hover{ 
 
    background: url("http://placekitten.com/g/300/200") no-repeat; 
 
    background-size:cover; 
 
    background-position: center center; 
 
}

<div class="wildlife"> 
 
</div>

來源

2016-04-13 02:45:52 mmativ

將鼠標懸停在原始圖像上時顯示背景圖像

回答

相關問題