Question

当鼠标悬停在图片上时，我尝试使“标题”显示为红色。我在ahref下尝试过产品卡，但仍然无法正常工作。我附上了一个例子。也许有帮助吗？将鼠标悬停在图片上时，我尝试使“标题”显示为红色。我在ahref下尝试过产品卡，但仍然无法正常工作。我附上了一个例子。也许有帮助吗？ example

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>

Answer 1

为此，您可以在CSS中使用：hover {..} 。

有关悬停的更多详细信息，请查看此链接https://www.w3schools.com/cssref/sel_hover.asp

鼠标悬停在图片上时如何使鼠标悬停文本颜色

1 个答案: