Question

我想问问题（如果我有img代码那样）

<img src"img1.png" id="img1" />

我又是另一个img

<img src="img1.png" id="img2" />

如何：鼠标悬停时隐藏img1并显示img2

#img2{display:none;} /*to hide img2*/
#img1:hover{display:none;} /*to hide when hover*/
#img2:hover{display:block;} /*to show the img 2 */

该代码无效：我想在鼠标悬停到img2

时替换img1

Answer 1

请参阅此fiddle

您应该按照以下方式更改CSS

#img2 {
  display: none;
}

#img1:hover{
  display: none;
}

#img1:hover~#img2 {
  display: block;
}

您可以使用~选择器来实现此目的。

Answer 2

试试这个。

#img1, #img2 {
  position: absolute;
  transition: 0.5s;
}

#img2:hover {
  opacity: 0;
  transition: 0.5s;
}

<img src="http://www.fillmurray.com/400/400" alt="Smiley face" id="img1" width="42" height="42">
<img src="http://www.fillmurray.com/200/200" alt="Smiley face" id="img2" width="42" height="42">

Answer 3

这是一个更酷的例子，也是你要求的一个例子：

<div class="reveal">
<img src="http://c.wrzuta.pl/wi16455/94df8de30009b2384fe15089" 
width=280px height=280px>
<img class="img2"   src="http://static.gamespot.com/uploads/
original/1123/11234696/2517081-0135811689-yamah.jpg"
width=280px  height=280px>
<div class="activator" ></div>
</div>

http://codepen.io/damianocel/pen/GopoJB

当鼠标悬停隐藏img并显示img

3 个答案:

请参阅此fiddle