Question

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img  title="Cool dude bro!" src="/images/profile5.png"></br>
<br> <strong>Incredible Hulk!</strong>
<br><img title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong></br>

代码复仇者一直说我需要将title放到每张图片上。当我已经这样做了。请帮忙。

Answer 1

$("img").on("mouseover",function(event){
 $(".tooltip").remove();
  Title=$(this).attr("title");
  $(this).removeAttr("title")
  let tooltip=$("<div/>",{class:"tooltip",html:Title,style:"left:"+event.pageX+"px;"+"top:"+event.pageY+"px;"});
  $(this).parent().append(tooltip);
  $(this).parent().find(".tooltip").fadeIn();
});
$("img").on("mouseleave",function(event){
 $(this).attr("title", Title)
 Title="";
 $(".tooltip").remove();
});

.tooltip{
position: absolute;
background-color:#000;
color:#fff;
padding:5px;
display:none;
 pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><img title="Cool as ninja!" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwE4cobK7ZLOS6mo2oE07NHNJLfxAcD9_NqdocEbmMWrMNj1fi" width="300"><br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img  title="Cool dude bro!" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRguGplqscctefh162YhLoMvnu398pKjyQ-2aJ8fFYNyunToDbB"><br>
<br> <strong>Incredible Hulk!</strong>
<br><img title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong><br>

Answer 2

我认为你的问题是关于alt和title的使用。

标题

title属性是全局属性，这意味着您可以在所有元素上使用它。一般来说（注意一些元素（例如abbr元素）它具有特殊含义）它被定义为：

title属性表示元素[...]
的建议信息

您应该阅读属性的定义，它解释了应该如何（不）使用它。

ALT

alt属性只能用于area，input（用于图片按钮）和img元素。对于img，它具有以下含义：

alt属性的值是img元素的后备内容，并为无法处理图像或禁用图像加载的用户和用户代理提供等效内容。

您应该（不）使用此属性的规则很多。

here

＆＃13;

<br><img alt="Cool as ninja!" title="Cool as ninja!" src="/images/profile2.png" width="300"></br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img  alt="Cool dude bro!" title="Cool dude bro!" src="/images/profile5.png"></br>
<br> <strong>Incredible Hulk!</strong>
<br><img alt="What's up bro, like my new car?"  title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong></br>

＆＃13;

使用title属性为每个图像添加工具提示

2 个答案:

标题

ALT