使用CSS如何在鼠标悬停时移除图片标题？

Question

HTML代码

<a href="#page5"><img id="imgsrc_4" src="http://140.123.105.162:4001/h/8427d242759e6584152dc293579042b3f9c377a5-254818-1200-1677-jpg/keystamp=1441340100-47d38eef85/002.jpg" title="002.jpg" style="margin: 0px; width: 1050px; height: 1467px;"></a>

有许多像上面的图像HTML。 我想搜索图像的标题（001.jpg，002.jpg等），并使用CSS删除/隐藏它。

我该怎么做？

- anhchuong95

---

你想要在鼠标悬停在图像上时不显示工具提示吗？ - Will

@Will 没错。有没有使用CSS的方法来实现这个？ - anhchuong95

很遗憾，仅使用CSS是不可能实现的。您需要使用JavaScript来删除标题属性。或者根据您的文本编辑器，您可以对这些标题属性进行全局搜索/删除。 - Will

Answer 1

稍有些晚了，但如果有人遇到同样的问题：可以在该图像上使用pointer-events:none，这样链接仍然有效，但标题不会在悬停时显示。

- Bohdan

---

可能有点晚，但这会帮助其他遇到同样问题并在搜索时遇到此问题的人。 - Niklas E.

Answer 2

您可以使用jQuery实现。您需要添加类并根据该类来隐藏内容，这可以通过使用jQuery实现。以下是演示..

$(".img_bx").hover(function(){
 
        // Get the current title
        var title = $(this).attr("title");
 
        // Store it in a temporary attribute
        $(this).attr("tmp_title", title);
 
        // Set the title to nothing so we don't see the tooltips
        $(this).attr("title","");
         

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#page5"><img class="img_bx" id="imgsrc_4" src="https://angularjs.org/img/angularconnect-conf.png" title="002.jpg" style="margin: 0px; width: 120px; height: 120px;"></a>

- Rakesh Kumar

---

抱歉，我不知道任何关于jquery的东西。使用css是我的最佳选择。是否可以将上述代码添加到用户脚本中？ - anhchuong95

没有使用CSS的可能性，您需要使用jQuery来隐藏标题，否则您必须从图像中删除标题... - Rakesh Kumar