我尝试“标题”使红色时,鼠标在图片上。 我尝试了ahref下的产品卡,仍然不工作。 我附上了一张像例子一样的图片。 也许能帮上忙? 我尝试“标题”使红色时,鼠标在图片上。 我尝试了ahref下的产品卡,仍然不工作。 我附上了一张像例子一样的图片。 也许能帮上忙? 示例
assign variant = product.selected_or_first_available_variant
<div class="product-card ">
<div class="media">
<a href="{{ product.url }}">
<div class="swiper-container" data-loop="true" data-pagination="false">
<div class="swiper-wrapper">
for image in product.images
if product.featured_image == image
<div class="swiper-slide">
<img class="image" src="{{image | img_url : section.settings.image_size}}" alt="{{product.title}}" >
</div>
endif
endfor
for image in product.images
if product.featured_image != image
<div class="swiper-slide">
<img class="image" src="{{image | img_url : section.settings.image_size}}" alt="{{product.title}}" >
</div>
endif
endfor
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</a>
if product.available
if product.compare_at_price > product.price
<div class="sale">
{{ section.settings.sale_string }}
{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}%
</div>
else
if product.tags contains 'new'
<div class="new">
{{ section.settings.new_string }}
</div>
endif
endif
else
<div class="sold-out">
{{ section.settings.sold_out_string }}
</div>
endif
</div>
<div class="data">
<div class="header">
<h3 class="title">
<a href="{{product.url}}">{{product.title}}</a>
</h3>
<div class="sprice-wrapper">
<span class="price">
if product.compare_at_price > product.price
<span class="price-compare">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
endif
<span class="price-varies">
if product.price_varies
{{ product.price_min | money_without_trailing_zeros }}+
else
{{ product.price | money_without_trailing_zeros }}
endif
</span>
</span>
- if variant.available and variant.unit_price_measurement
<span class="unit-price">
{{ variant.unit_price | money }} / if variant.unit_price_measurement.reference_value != 1 {{- variant.unit_price_measurement.reference_value -}} endif {{ variant.unit_price_measurement.reference_unit }}
</span>
endif
</div>
</div>
<div class="footer">
if product.variants.size > 1
<a href="{{product.url}}" class="select-options"> if product.available {{ section.settings.select_options_string }} else {{ section.settings.sold_out_string }} endif </a>
else
<div class="add-to-cart if product.available available endif " data-product-id="{{ variant.id }}" data-add-to-cart="{{ section.settings.add_cart_string }}" data-sold-out="{{ section.settings.sold_out_string }}"> if product.available {{ section.settings.add_cart_string }} else
{{ section.settings.sold_out_string }} endif </div>
endif
<div class="add-to-wishlist" data-product-id="{{ variant.id }}">
<span class="add">
<svg viewBox="0 0 24 24"><path d="M16.243 5.843c.801 0 1.555.312 2.121.879a3.003 3.003 0 0 1 0 4.243l-2.121 2.121-2.121 2.121L12 17.328l-2.121-2.121-2.121-2.121-2.121-2.121a2.98 2.98 0 0 1-.879-2.121c0-.801.312-1.555.879-2.121a2.98 2.98 0 0 1 2.121-.879c.801 0 1.555.312 2.121.879l.707.707L12 8.843l1.414-1.414.707-.707a2.98 2.98 0 0 1 2.122-.879m0-2c-1.28 0-2.559.488-3.536 1.464L12 6.015l-.707-.707c-.976-.976-2.256-1.464-3.536-1.464s-2.559.487-3.535 1.464a5 5 0 0 0 0 7.071L6.343 14.5l2.121 2.121L12 20.157l3.536-3.536 2.121-2.121 2.121-2.121a5 5 0 0 0-3.535-8.536z"></path><path fill="none" d="M0 0h24v24H0z"></path></svg>
</span>
<span class="adding">
</span>
<span class="added">
<svg viewBox="0 0 24 24"><path d="M16.243 3.843c-1.28 0-2.559.488-3.536 1.464L12 6.015l-.707-.707c-.976-.976-2.256-1.464-3.536-1.464s-2.559.487-3.535 1.464a5 5 0 0 0 0 7.071L6.343 14.5l2.121 2.121L12 20.157l3.536-3.536 2.121-2.121 2.121-2.121a5 5 0 0 0-3.535-8.536z"></path><path fill="none" d="M0 0h24v24H0z"></path></svg>
</span>
</div>
</div>
</div>
</div>
为此,您可以使用:Hover{。。} 在CSS里。
有关hover的更多信息,请访问以下链接https://www.w3schools.com/cssref/sel_hover.asp