Question

我的问题......

我想让图像变暗并在上面显示按钮。当我尝试时，按钮也变暗了。

我试过这段代码：

<style>
.image {
    background: url('http://carinapilar.com/wp-content/uploads/MinhasHistorias/Capa.Primeiro.Livro.png');
    background-size:contain;
    width: 250px;
    height: 355px;
    position:relative;
}
.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
}
div.show-image input.update {
    top:0;
    left:0;
}
div.show-image input.delete {
    top:0;
    left:79%;
}

</style>

<div class="show-image">
    <div class="image">
        <div class="overlay">
            <input class="update" type="button" value="Update" />
            <input class="delete" type="button" value="Delete" />
        </div>
    </div>
</div>

我发现只有解决方案或只带有黑暗功能或按钮悬停......我找不到两者......

Here是小提琴。

Answer 1

尝试从叠加层中取出按钮，并使用z-index将它们提升到叠加层上方。查看fiddle here。

我改变的事情是移动按钮：

<div class="show-image">
  <div class="image">
    <input class="update" type="button" value="Update" />
    <input class="delete" type="button" value="Delete" />
    <div class="overlay"></div>
  </div>
</div>

并将z-index添加到输入中：

div.show-image input {
    position:absolute;
    display:none;
    z-index: 10;
}

Answer 2

我完全摆脱了.overlay，只使用了:after。

JSFiddle

CSS：

.image:after {
    content:'';
    opacity:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.image:hover:after {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
}

.image input {
    z-index:2;
}

HTML：

<div class="show-image">
    <div class="image">
        <input class="update" type="button" value="Update" />
        <input class="delete" type="button" value="Delete" />
    </div>
</div>

我必须给出按钮z-index，以便它们能够处于淡入淡出效果之上。

Answer 3

Here是您的解决方案。

只需将input按钮移到div.overlay以外，即可让您变暗。

您只需要更改HTML：

<div class="show-image">
    <div class="image">
        <div class="overlay">
        </div>
        <input class="update" type="button" value="Update" />
        <input class="delete" type="button" value="Delete" />
    </div>
</div>

与@ philnash的解决方案不同，不需要z-index，因为input元素在div.overlay之后。

如何在鼠标悬停和显示按钮上使图像变暗？

3 个答案: