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

Question

I have a wordpress recently viewed products widget. I would like the name of the product to show up over the image, when you hover over it.

I have it working elsewhere, the difference is than with this widget, the li do not have a class attached. I know the line I need to fix is:

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

I just don't know what it should be changed to, to show the span when the image is hovered!

For the first time I got a fiddle to work!

Any ideas?

 .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

You should use following selector:

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

Your <ul> tag has class "product_list_widget" so following selector:

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

wouldn't work, because that would require <ul> to be inside element that has class "product_list_widget".

Answer 2

If you want to use css only solution, you could use adjacent selector :

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

This targets element immediately after your img element, and you don't need to know the class of your span for that.
Only requirement, you'll need to stick to, is that span has to be immediately after img in your markup.
Another alternative might be sibling combinator selector:

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

which only require your span element to be after img but not necessary immediately.

Here is the JSFiddle with that.