如何在悬停时显示另一张图片 [英] How do I make another image appear on hover

问题描述

这可能是一个简单的问题，但我似乎无法让我的头脑得到它的工作。
这里是基本的设置（我错过了所有的定位等，因为它是不相关的）：

  < div id =wrapper> 
< img class =album-pic-exitsrc =images / exit.jpeg> 
< img class =album-picsrc =images / blank.gif> 
< / div> 
 
＃wrapper.album-pic-exit {display：none; } 
＃wrapper.album-pic：hover + .album-pic-exit {display：block} 
  

基本上当光标悬停在album-pic上时，出现album-pic-exit。我设法通过让..exit成为悬停的非重复背景来完成这项工作，但是，我认为那是不洁净的，当然必须有一个更简单更直接的解决方案。我对此相对比较陌生，但我相信我通过寻找和尝试自己而不是诉诸于谷歌来更好地工作，所以如果语法全错，我就不好。 p.s我最好想要一个css而不是javascript或jquery的演练解决方案。

你可以这样做;不过，您必须切换两张图片的顺序，如下所示：

 < div id =wrapper> ; 
< img class =album-picsrc =images / blank.gif> 
< img class =album-pic-exitsrc =images / exit.jpeg> 
< / div> 
  

然后使用这个CSS：

  .album-pic-exit {
 display：none; 
} 
 .album-pic：hover + .album-pic-exit {
 display：inline; 
} 
  

首先，我们隐藏出口图像与显示：无。然后，我们使用邻接的同胞选择器 + 来选择出口图片，当另一个图片悬停时。

This may be a simple question but I can't seem to get my head around to getting it working. here is the basic set up (I missed out all the positioning etc as it isn't relevant):

<div id="wrapper">
<img class="album-pic-exit" src="images/exit.jpeg"> 
<img class="album-pic" src="images/blank.gif">
</div>

#wrapper.album-pic-exit { display:none; } 
#wrapper.album-pic:hover +.album-pic-exit { display:block }

Basically when the cursor hovers over "album-pic" the "album-pic-exit" appears. I managed to make this work by having the "..exit" be a non-repeat background on hover but, I think thats unclean and surely there must be an easier more straight forward solution. I am relatively new to this but i believe I work better by looking and experimenting myself rather than resorting to google so my bad if the syntax is all wrong. p.s I would preferably want a walkthrough solution of css rather than javascript or jquery.

解决方案

You can do it this way; however, you will have to switch the order of the two images, like this:

<div id="wrapper">
  <img class="album-pic" src="images/blank.gif">
  <img class="album-pic-exit" src="images/exit.jpeg">
</div>

Then use this CSS:

.album-pic-exit {
  display: none;
}
.album-pic:hover + .album-pic-exit {
  display: inline;
}

First, we hide the exit image with display: none. Then, we use the adjacent sibling selector + to select the exit image when the other image is being hovered over.

这篇关于如何在悬停时显示另一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！