jquery - Hide Title tag on image Hover

admin管理员组

文章数量:1122832

I would like to hide the image title tag when hovering an image as they aren't needed on my website. I have tried this code below and added it above the closing </head> in header.php but it doesn't work.

I don't have to download a plugin to achieve this. The title tag doesn't have an impact on SEO so there shouldn't be an issue with hiding it.

Would someone be able to tell me why my script isn't working and what I can do to make it work please?

This is the code I have tried in my header.php above the closing </head>

<script>
jQuery(document).ready(function($) {
    $('img').hover(function()
    { $(this).removeAttr('title'); });
});
</script>

I would like to hide the image title tag when hovering an image as they aren't needed on my website. I have tried this code below and added it above the closing </head> in header.php but it doesn't work.

I don't have to download a plugin to achieve this. The title tag doesn't have an impact on SEO so there shouldn't be an issue with hiding it.

Would someone be able to tell me why my script isn't working and what I can do to make it work please?

This is the code I have tried in my header.php above the closing </head>

<script>
jQuery(document).ready(function($) {
    $('img').hover(function()
    { $(this).removeAttr('title'); });
});
</script>

• images
• jquery

Share Improve this question edited Mar 4, 2021 at 17:29 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Mar 4, 2021 at 17:17 Harriet NHarriet N 3111 silver badge33 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

Check Errors in console by pressing F12, Your code is correct but WordPress sometimes don't understands $, Use jQuery instead of $.

<script> 
jQuery(document).ready(function($) { 
    jQuery('img').hover(function() { 
        jQuery(this).removeAttr('title');
    }); 
});

There's no need for jquery. Sole CSS can do that:

img[title],img:hover[title] {
opacity:0; /* both work, take what you prefer */
display:none;
}

Set the pointer-events CSS property to none.

img {
    pointer-events: none;
}

本文标签： jqueryHide Title tag on image Hover