将鼠标悬停在原始图像上时显示背景图像

当鼠标悬停在原始图像上时显示背景图像，并且在不再悬停在原始图像上时背景图像消失时，显示背景图像。下面是我的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

将鼠标悬停在原始图像上时显示背景图像

回答

相关问题