0

如果有人可以帮助我，那就太好了！我的网页上有一些图像，我想制作一个小效果，当我将鼠标移到图像上时，应该出现 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;
}

提前致谢！

4

1 回答 1

2

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

.container button {
   display: none;
}

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

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

于 2013-02-26T14:42:55.710 回答