Question

如果有人可以帮我这个，那就太好了！我的网页上有一些图像，我想制作一个小效果，当我将鼠标移到图像上时，应该在图像的中心显示ADD按钮，并在按钮周围作为背景颜色具有不透明效果。我有这个HTML代码：

<span class="img1" style="opacity: 1;"><img class="prodimg" src="img/naturale_pi_5_large.jpg" alt="Lily Pink Bag"></span>
<span class="img2" style="opacity: 0; visibility: visible;">
    <div class="buttoncont">
        <a href="#">Add to Cart</a>
    </div>
</span>

还有这个CSS：

.buttoncont{
        display:block;
        width:92px;
        margin:0;
        background:#c33a56;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

#content .productlist .product .foot .buttoncont {
    right:0;
    position:absolute;
    bottom:0;
}

.buttoncont a,
.buttoncont input {
    display:block;
    color:#ffffff;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
    font-family: Arial, sans-serif;
    font-size:90%;

    background:url('img.jpg');

    border:0;
    padding:0;
    cursor:pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.buttoncont input:hover {
    text-decoration:underline;
}
.miniproductlist .imagecontainer img {
    vertical-align:middle;
    display:inline;
    max-width:100%;
    outline:#ffffff 1px solid;
}

.miniproductlist .img2 {
    position:absolute;
    top:0;
    left:0;
    visibility:hidden;
    width:100%;
    height:81px;
}

提前致谢！

Answer 1

如果要将所有内容包装在容器中，只需使用CSS即可完成此操作

.container button {
   display: none;
}

.container:hover button {
   display: inline-block;
}

现在我们在这里做的是隐藏按钮，在悬停容器div时，我们正在显示它，或者你可以使用visibility: hidden;，但这将占用display: none;不会占用的空间

鼠标悬停时应出现ADD按钮

1 个答案: