0

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

<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”成为悬停时的非重复背景来完成这项工作，但是，我认为那是不干净的，肯定有一个更简单更直接的解决方案。我对此相对较新，但我相信我通过查看和试验自己而不是求助于谷歌来更好地工作，所以如果语法全错，我的坏事。ps我最好想要一个css而不是javascript或jquery的演练解决方案。

4

3 回答 3

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

于 2012-08-29T18:49:44.283 回答
1

很多可能性 :) 首先，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;
}

（当然，填写大写内容的 URL。）如果您需要这两个图像来解决编码问题，您也可以谷歌搜索“javascript rollover tutorial”。

询问您是否有问题:) Cheerz Simon

于 2012-08-29T18:51:54.187 回答
0

Amazing Hover Effects with CSS3 是一个很好的教程： .
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>
于 2012-08-29T18:46:40.950 回答