タイトルで説明するのは難しいですが、 www.compuhex.co.ukに行くと見ることができます。画像にカーソルを合わせると、画像の上にテキストが表示され、元の画像の不透明度が上がります。何らかの理由で、テキストの不透明度レベルが意図されていない場合にも影響を受けるようになりました。それは常にこのようであるとは限らず、私の人生では、それを解決する方法がわかりません.
HTMLのコード スニペットは次のとおりです。
<div class="wrapper">
<img src="products/Pink2.PNG" width="75%" style="padding-top:15px" alt="USB Pink cable for Apple iPhone"/>
<a href="pink_iphone.html" title="" class="description"><span class="productimagetext">
USB pink sync charger cable for iPhone<br /><br /> £1.99</span></a>
</div>
CSS
.wrapper{ padding: 8px; background-color: #FFF; border: none; position: relative; width:260; height: 200; margin: 0 auto; }
.wrapper:hover{ cursor: pointer; }
.description{ display: none; background-color: #fff; color: #000; position: absolute; left: 8px; top:10px; width: 260px; height: 200px; padding: 30px 0 0 0; }
.description img{ vertical-align: middle; margin: 0 2px 1px 0; }
jqueryは;
$('.wrapper').hover(function(){
$(this).children('.description').stop().show().fadeTo(200, 0.8);
},function(){
$(this).children('.description').stop().hide().fadeTo(200, 0);
});
www.compuhex.co.ukでライブで見ることができます。サイトはまだ部分的に工事中であることに注意してください。