Question

我正在尝试调整我拥有的主题，而不是专家： - ）

在我的CSS中，我有图像（.collectionItemImage）和它下面的文本（.collectionItemDetails）。我已经设置了一个用于悬停细节的moz转换，我希望细节上的moz转换在将鼠标悬停在图像上时也能正常工作。我怎样才能做到这一点？以下是css：

.collectionItemImage {width:290px;height:290px;}  
.collectionItemImage a { display:block;}
.collectionItemImage img {width: 290px !important; height: 290px; display:inline;}

.collectionItemDetails {position:absolute; text-align:center; width: 290px;  padding: 0px 0px 0px 0px;  }
.collectionItemDetails {  display:block; color:#000000; padding: 0 0 0 0; font-style:normal; }
.collectionItemDetails h3 {  display:block; color:#000000;font-size:12px; padding: 0 0px 0 0; font-family:  Georgia, serif ; text-transform: uppercase; }
.collectionItemDetails h3 a { text-decoration:none;}
.collectionItemDetails h3 a:hover {background: none repeat scroll 0% 0% rgb(226, 221, 217); border-radius: 1px 1px 1px 1px; -moz-transition: all 0.2s ease-in-out 0s; color rgb(51, 51, 51);

加价是：

<ul id="collectionListing" class="clearfix">
{% for product in collection.products %}
<li class="collectionItem fader">
<div class="collectionItemImage">
<a href="{{ product.url }}" title="{{ product.title | escape }}">
<img src="{{ product.featured_image | product_img_url: 'large' }}" width="260" alt="{{ product.title | escape }}" />
</a>
</div> 
<div class="collectionItemDetails">
<h3 class="collectionItemTitle"><a href="{{ product.url }}">{{ product.title | escape | strip_html }}</a></h3>
<span class="price">{{ product.price_min | money }}</span>
</li>

TIA

将鼠标悬停在图像上时的文本转换

0 个答案: