Javascript 如何使鼠标上方的图像变暗并显示按钮？

我的问题

我想使图像变暗并显示其上的按钮。当我尝试时，按钮也变暗了

我尝试了以下代码：

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

我发现只有解决方案，或只带来黑暗的功能或悬停按钮。。。我找不到两者都在一起

---

是小提琴。

尝试将按钮从覆盖层中取出，并使用z索引将其提升到覆盖层上方。看看一本书

我更改的内容是移动按钮：

<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索引将其提升到覆盖层上方。看看一本书

我更改的内容是移动按钮：

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

我完全摆脱了。覆盖，只是用了：之后

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:

我必须给按钮z-index，这样它们才能在淡入淡出效果的顶部。

我完全摆脱了。覆盖，只是使用：after

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:

我必须给出按钮的z-索引，以便它们位于淡入淡出效果的顶部。

是您的解决方案

只需将输入按钮移到正在变暗的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索引，因为输入元素位于div.overlay之后。

是您的解决方案

只需将输入按钮移到正在变暗的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索引，因为输入元素位于div.overlay之后。

类似：？这将通过使用伪元素减少标记？类似：？哪一种方法可以通过使用伪元素来减少标记？如果你使用一个“真实”的z-index，那就好了：李将它改成更真实的@jbutler483，就像一个单独的“9”就足够了：P我刚刚兴奋起来：P@jbutler483如果你使用一个“真实”的z-index，李将它改成更真实的@jbutler483，就像一个单独的“9”一样已经够了：P觉得我很兴奋：P@jbutler483