HIde image titles on hover in Safari

Replies: 1

Hi folks. I am trying to hide or otherwise not render the image title on hover. I have done the following few things and frankly not even sure what is doing what but none of this appears to work on Safari.

#JS#

jQuery(‘.envira-gallery-item img’).on(‘mouseenter’, function() {
jQuery(this).data(‘title’, jQuery(this).attr(‘title’));
jQuery(this).attr(‘title’, ”);
}).on(‘mouseleave’, function() {
jQuery(this).attr(‘title’, jQuery(this).data(‘title’));
});

##I started with this##

jQuery(‘.envira-gallery-item img’).hover(function() {

jQuery(this).data(‘title’, jQuery(this).attr(‘title’));

jQuery(this).attr(‘title’, ”);

}, function() {

jQuery(this).attr(‘title’, jQuery(this).data(‘title’));

});

##CSS##

.envira-gallery-item img[title] {
pointer-events: none;
}
.envira-gallery-item img[title]::after {
content: attr(title);
visibility: hidden;
opacity: 0;
}

Any ideas?

• This topic was modified 6 months, 1 week ago by nigel-lew.