Question

如何让悬停选项让我看到不透明度的图像和不受不透明度风格影响的p标签？请注意，img位于输入标签内，当我点击它时，将出现带有输入形式的bootsrap模式

 .img_wrap:hover 
 #updateImg{ opacity: 0.7; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="img_wrap">
     <input type='image' id='updateImg' src='http://placehold.it/350x150'>
       </input>
       <span></span><p class="imgText">Click here to change your image</p>
     </div>

Answer 1

您需要分别处理每个孩子的不透明度。此外，如果您希望它们重叠，则需要其中一个（我的示例中的文本，定位absolute和父relative）。

我猜测以下示例是否符合您的要求？如果没有，请说明你的要求更清楚。

.img_wrap {
  position: relative;
  display: inline-block;
}
.img_wrap input[type="image"]{
  opacity: 1;
  display: block;
  transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover input[type="image"] {
  opacity: .3;
}
.img_wrap .imgText {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover .imgText {
  opacity: 1;
  pointer-events: none;
}

<div class="img_wrap">
  <input type='image' id='updateImg' src='http://placehold.it/350x150' />
  <div class="imgText">Click here to change your image</div>
</div>

备注：

<input>是一个自动结束标记，因此<input></input>无效。
应该使用
<input type="image">代替（提交）按钮。这是带有背景图像的按钮的快捷方式，可以根据图像比例调整自身大小。如果您想使用<input>向服务器提交图片，则可能需要使用<input type="file" />

Answer 2

这就是你想要的

.img_wrap{
    display: inline-block;
    position: relative;
}
.img_wrap:hover #updateImg{
    opacity: 0.7;
    position: relative;
}
.img_wrap:hover .imgText{
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
}

输入图片：悬停文字和不透明度

2 个答案: