我正在创建一个网站,并希望通过加载另一个我在 Photoshop 中创建的颜色套装略有不同的图像/按钮来为我的按钮添加悬停效果。
当我应用代码时没有任何反应。
这是我的代码:
CSS:
#main{
position: relative;
background-color:#ececec;
height:900px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#main .button2{
position: absolute;
left:0.5%;
top: 71.5%;
z-index:20;
width:170px;
height:40px;
}
#main .button2:hover{
background-image : url(images/buttBootsRollover.png);
}
HTML:
<div id="main">
<article>
<section>
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>
</article>
这张图片可能会提供更好的概览:
最终我想在所有 9 个按钮上添加相同的悬停效果
最佳答案
你这样做的方式有点不对。您在包含图像的元素上设置 background-image 属性,该图像(大概)占据了元素的整个空间。尝试使用它会让你自己头疼,所以与其解释为什么你会得到这样的结果,我只想告诉你不要那样做并给你一个解决方案:
去掉 div 元素中的 img 元素。将 button2 类的 background-image 属性更改为您想要的默认图像。保持你的 .button2:hover 属性不变。
关于html - CSS 悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15261451/