javascript - 如何在鼠标悬停时使图像变暗并显示按钮？

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是 fiddle 。

Answer 1

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 之后。