我研究了与我类似的其他问题,并指出了正确的方向,但我相信我的情况有点不同。我是 CSS 新手,所以请多多包涵!我正在尝试制作一个悬停时可交互的徽标。我取得了一些成功,但希望做得更好。徽标由两个图像组成,一个是耙子,另一个是顶部的文本图像。在悬停时,我希望耙子做一个耙子动作,但让文本保持静止。我已经成功地使耙子(底部图像)在悬停时移动,但是很难将光标放在耙子(底部图像)上被文本(顶部图像)覆盖我有这个 HTML:
<div id="container">
<div class="logo">
<img src="rake-logo-top.png" width="214" height="170" />
</div>
<div class="vertpan pic">
<img src="rake-logo-bottom.png" >
</div>
</div>
CSS:
#container {
height:304px;
width: 246px;
margin: 20px;
cursor: pointer;
}
.logo {
position: absolute;
z-index: 2;
padding-top: 105px;
padding-left: 15px;
}
.pic {
height: 304px;
width: 246px;
overflow: hidden;
}
/*VERTPAN*/
.vertpan img {
position: relative;
margin-top: 100px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
z-index: 1;
}
.vertpan img:hover {
margin-top: 0px;
}
我知道这可以通过以下方式来完成:
#container:hover + vertpan img {
margin-top: 100px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
z-index: 1;
}
但这并不完全正确。“vertpan”代码已预先格式化,我正在更改它。基本上,我想将鼠标悬停在#container 或 .logo 上,并且与仅悬停在 .pic 上时的反应相同。我试了几次都卡住了……是不是因为我已经在 .pic 上有了悬停效果?
任何帮助表示赞赏!