Question

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

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

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

Answer 1

你可以这样做;但是，您必须切换两个图像的顺序，如下所示：

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

然后使用这个CSS：

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

首先，我们使用exit隐藏display: none图片。然后，我们使用相邻的兄弟选择器+在剩余的其他图像悬停时选择exit图像。

Answer 2

许多可能性:)首先，CSS中没有向后选择器，因此对于CSS，您需要以下HTML：

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

无论如何，这会更好：

<div id="wrapper"></div>

    #wrapper {
              width:ALBUM_PIC_WIDTH;
              height:ALBUM_PIC_HEIGHT;
              background:url(ALBUM_PIC_URL) 0 0 no-repeat;
}

#wrapper:hover {
              background:url(ALBUM_PIC_EXIT) 0 0 no-repeat;
}

（当然，请填写大写字母的网址。）如果您需要将两个图像作为编码问题，也可以谷歌搜索“javascript翻转教程”。

问你是否有问题:) Cheerz 西蒙

Answer 3

Amazing Hover Effects with CSS3 is a good tutorial:。
CSS：


div.shadow {
    width: 300px;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    }
div.shadow:hover {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

HTML：


<div class="shadow">
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.
</div>

如何在悬停时显示另一个图像

3 个答案: