所以我创建了一个图像按钮，并给它一个透明的黑色悬停属性。由于某种原因，图像不再是“按钮”，但它仍然具有悬停效果。有什么方法可以在保留按钮属性的同时保留颜色？
http://jsfiddle.net/cp14rbpa/1/
我在想的是透明的悬停覆盖覆盖图像按钮属性。我不确定这是否是问题所在。
<body>
<div class="image">
<a href="#"><input type="image" src="img/testor.jpg" name="saveForm" class="btTxt submit" id="saveForm" /></a>
</div>
</body>
.image {
position:relative;
width:726px;
height:549px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
最佳答案
我猜你想要这样的东西:)
.image {
position: relative;
width: 726px;
height: 549px;
}
.image a {
display: block;
z-index: 2;
position: relative;
}
.image img {
width: 100%;
vertical-align: top;
}
.image a:after {
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image a:hover:after {
opacity: 1;
}<div class="image">
<a href="#">
<img src="http://www.golfdigest.com.sg/files/u1/726x549-instruction.jpg" alt="Clickable" />
</a>
</div>关于html - 透明悬停在图像按钮中的图灵图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26556944/