Question

我正在尝试让我的代码在悬停在已放置的某些图像上时切换图像。有谁知道解决方案？这是代码：

.first-image {
    float: left;
}
.first-image:hover {
    background-image: url(0-1/0_Hover.png)
}
.second-image {
    float:right;
}
.second-image:hover {
    background-image: url(0-1/1_Hover.png)
}

_

<div class="first-image">
    <a href="https://bi-na-ri-es.com/black-white"><img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""/></a>
</div>

<div class="second-image">
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""/>
</div>

Answer 1

您可以将两个图像放在标记中，默认情况下隐藏要悬停的图像，当您悬停父图像时，隐藏可见图像并显示隐藏图像。

.first-image {
  float: left;
}
.second-image {
  float:right;
}
.hover, .parent:hover img:not(.hover) {
  display: none;
}
.parent:hover .hover {
  display: inline-block;
}

/* you don't need this - just for the demo */
.hover {
  background: red;
}

<div class="first-image parent">
  <a href="https://bi-na-ri-es.com/black-white">
    <img src="0-1/0_No_Hover.png" width="946" height="1066" alt="">
    <img src="0-1/0-1/0_Hover.png" width="946" height="1066" alt="" class="hover">
  </a>
</div>

<div class="second-image parent">
  <img src="0-1/1_No_Hover.png" width="946" height="1066" alt="">
  <img src="0-1/1_Hover.png" width="946" height="1066" alt="" class="hover">
</div>

Answer 2

您不能这样做，因为您的div中没有悬停图像覆盖背景图像。您可以在div中添加透明图像并制作如下内容：

.second-image {
    background-image: url(0-1/1_No_Hover.png)
}
.second-image:hover {
    background-image: url(0-1/1_Hover.png)
}

<div class="second-image">
    <img src="someTransparentImage" width="946" height="1066" alt=""/>
</div>

或者您可以从div内部删除图像，并使用背景图像确定该div的宽度或高度，而不悬停和悬停上的其他图像

<div class="second-image">            
 </div>

和css：

.second-image {
    width: 946px;
    height: 1066px;
    background-image: url(0-1/1_No_Hover.png)
}
.second-image:hover {
    background-image: url(0-1/1_Hover.png)
}

与第一个div相同

Answer 3

像this?

这样的东西

.image {
  width: 100%;
  height: 500px;
  background-image: url(https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg);
}
.image:hover {
  background-image: url(http://az616578.vo.msecnd.net/files/2016/09/25/636104270517585477-986189690_maxresdefault.jpg);
}

Answer 4

您需要使用JavaScript在悬停时切换图片来源。

但是，您可以使用CSS在悬停时切换背景图片，因为您已经设置了这里 - 只需更改HTML和CSS：

＆＃13;

.image {
  width: 946px;
  height: 1066px;
}

.first {
  float: left;
  background-image: url(0-1/0_No_Hover.png);
}

.first:hover {
  background-image: url(0-1/0_Hover.png);
  /*just for demo*/
  border: 2px solid red;
}

.second {
  float: right;
  background-image: url(0-1/1_No_Hover.png);
}

.second:hover {
  background-image: url(0-1/1_Hover.png);
  /*just for demo*/
  border: 2px solid blue;
}

＆＃13;

<a href="https://bi-na-ri-es.com/black-white">
  <div class="first image"></div>
</a>

<div class="second image"></div>

＆＃13;

请注意，在过去，将<div>包装在锚标记中是不可接受的。但是，它符合HTML5标准，因此请将<!DOCTYPE html>添加到文件的顶部。

Answer 5

这是使用Jquery最简单的方法：

	$('.first-image').mouseover(function(){
		$(this).toggleClass('second-image');	
	});
	$('.second-image').mouseover(function(){
		$(this).toggleClass('first-image');	
	});

.wrapper {
	background-color: coral;
	width:200px;
	height: 100px;
}

.first-image {
    float: left;
}
.first-image:hover {
    background-image: url(0-1/0_Hover.png)
}
.second-image {
    float:right;
}
.second-image:hover {
    bac

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="first-image">
			<a href="https://bi-na-ri-es.com/black-white">
			<img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cc/Googlewave.svg/1273px-Googlewave.svg.png" width="100" height="100" 	alt=""/>
			</a>
	</div>

	<div class="second-image">
	 <a href="https://bi-na-ri-es.com/black-white">
			<img src="https://santatracker.google.com/images/og.png" width="100" height="100" alt=""/>
		</a>
</div>
</div>

Answer 6

好吧，我不知道你为什么要那样做，但因为我知道图像是根据它们的来源出现的，每个来源都显示一个图像。所以改变src会改变图像。我想可能通过使用封面图片，z-index和设置时间它可以工作，但不相信它是否真的是一个好方法！

.wrapper {
	width:600px;
	height: 300px;
}

.first-image {
    float: left;
		background-image: url("http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png");
		background-size: cover;
		width: 300px;
		height: 300px;
}
.first-image:hover {
    background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png");
		width: 300px;
		height: 300px;

}
.second-image {
    float:right;
		background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png");
		width: 300px;
		height: 300px;
}
.second-image:hover {
    float: left;
    background-image: url(http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png);
    background-size: cover;
    width: 300px;
    height: 300px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
		<div class="first-image"></div>
	 	<div class="second-image"></div>
</div>

鼠标悬停期间切换图像

6 个答案: