誰かがこれで私を助けることができれば、素晴らしいでしょう! 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;
}
前もって感謝します!