0

誰かがこれで私を助けることができれば、素晴らしいでしょう! Web ページにいくつかの画像があり、画像の上にマウスを移動すると、画像の中央に [追加] ボタンが表示され、ボタンの周りに背景色になる小さな効果が必要です。不透明効果あり。私はこの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 に答える