0

很难在标题中解释，但可以在您访问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上看到。请注意，该网站仍在部分建设中。

4

0 回答 0