Question

我在悬停在原始图像上时显示背景图像的方法，以及当不再悬停在原始图像上时背景图像消失的方法。下面是我的HTML和CSS的片段。有没有简单的CSS命令说＆＃34;隐藏原始图像＆＃34;或＆＃34;显示背景图像＆＃34;？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如上所述，您可以使用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>

Answer 2

当您将鼠标悬停在<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。

Answer 3

您仍然可以使用纯css执行此操作，但您需要为width设置height和div，请查看下面的代码段。

.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>

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

3 个答案: