Question

所以我创建了一个图像按钮，我给它一个透明的黑色悬停属性。由于某种原因，图像不是＆＃34;按钮＆＃34;不再，但它仍然有悬停效果。有没有什么方法可以保持按钮属性，同时仍然有颜色？

我的想法是透明悬停覆盖覆盖图像按钮属性。我不确定这是不是问题。

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

Answer 1

我想你想要这样的事情：）

＆＃13;

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

＆＃13;

<div class="image">
  <a href="#">
    <img src="http://www.golfdigest.com.sg/files/u1/726x549-instruction.jpg" alt="Clickable" />
  </a>
</div>

＆＃13;

Answer 2

使用<button>标记代替<a>标记。像here

一样

图像悬浮在图像按钮中的透明图像

2 个答案: