Question

我有一个wordpress最近查看的产品小部件。当您将鼠标悬停在图像上时，我希望产品的名称显示在图像上。

我在其他地方工作，区别在于这个小部件，li没有附加类。我知道我需要解决的问题是：

.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {

我只是不知道应该改变什么，以显示图像悬停时的跨度！

这是我第一次上班！

有什么想法吗？

.recent_view_prod ul.product_list_widget li {
  width: 22%;
  margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
  width: 100%;
  float: left;
}
.recent_view_prod ul.product_list_widget li {
  display: inline-block;
}
.recent_view_prod span.product-title {
  display: none;
}
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
  display: block!important;
  z-index: 100;
  position: absolute;
  font-size: 1vw;
  line-height: 1.5em;
  text-align: left;
  padding-left: .5em!important;
  padding-right: .5em!important;
  color: white;
  background-color: rgba(160, 163, 162, 0.8);
  left: 0px;
  bottom: 25px;
  width: 75%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
  <div class="wpb_wrapper">
    <div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
      <h3 class="widget-title element-title">Recently Viewed Products</h3>
      <ul class="product_list_widget">
        <li>
          <a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
            <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2">	<span class="product-title">Opulent Bloom Card Holder</span>
          </a>
          <span class="amount">£19.95</span>
        </li>
        <li>
          <a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
            <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1">	<span class="product-title">Store-M's Nesting Food Boxes</span>
          </a>
          <span class="amount">£11.95</span>
        </li>
        <li>
          <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
            <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn">	<span class="product-title">Happy Jackson Crackers Tin</span>
          </a>
          <span class="amount">£6.99</span>
        </li>
        <li>
          <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
            <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2">	<span class="product-title">Happy Jackson Snack Box Set</span>
          </a>
          <span class="amount">£9.99</span>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您应该使用以下选择器：

ul.product_list_widget li .attachment-shop_thumbnail:hover span.product-title {
    //styles as above
}

你的＆lt; ul＆gt; tag具有类“product_list_widget”，因此遵循选择器：

.product_list_widget ul li .attachment-shop_thumbnail:hover + span.product-title

不起作用，因为这需要＆lt; ul＆gt;在具有类“product_list_widget”的元素内部。

Answer 2

如果您想使用仅限css的解决方案，可以使用adjacent selector：

img.attachment-shop_thumbnail.wp-post-image:hover + span {
    display: block;
    position:absolute;
}

这会在您的img元素之后立即定位元素，而您无需知道该范围的类别。
您需要坚持的唯一要求是，span必须在您的标记中img之后立即生效。
另一种选择可能是sibling combinator选择器：

img.attachment-shop_thumbnail.wp-post-image:hover ~ span {
        display: block;
        position:absolute;
}

只需要span元素在img之后，但不需要立即生效。

以下是JSFiddle。

仅在将鼠标悬停在图像上时显示span元素

2 个答案: