Question

总jquery newb在这里，我想知道当你将鼠标悬停在某个东西上时，两种类型的文本会有什么不同，如果有人可以解释它们是什么，非常感谢。

第一个悬停文字：当您将鼠标悬停在stackoverflow上的向上投票或向下投票时，您会看到两个不同的消息显示在黄色框中。

第二个悬停文字：

当您将鼠标悬停在推荐人的图像上或将鼠标悬停在“关注”按钮右侧的小圆圈上时，会出现一个带有小三角形的黑框，并说明您正在悬停的内容。

真的很感谢任何信息再次感谢

Answer 1

当您将鼠标悬停在投票箭头上时，在stackoverflow中称为tooltip，默认浏览器是为此生成的title，我们使用<a title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a> 写下这个：

custom tooltip

另一方面，就像在twitter中css一样，您使用javascript＆amp;如果你想要一些动画，你也可以使用<a class="parent"> <span class="tooltip">hello</span> </a>。

像这样写：

<强> HTML：

.parent{
  display:block;
  position:relative;
}
.tooltip{
  display:none;
  position:absolute;
  top:-20px;
  left:-10x;
}
.parent:hover .tooltip{
 display:block
}

<强> CSS：

{{1}}

Answer 2

您在stackoverflow上看到的悬停效果向上或向下投票是工具提示;用户代理为它们设置样式，您无法改变它们。如果你在html元素上使用title属性，它们默认适用;当您将鼠标悬停在元素上时，工具提示会显示。

当你看到@用户的图标，显示他们的名字时，你在Twitter上看到的悬停效果，用css设置样式，并且（我假设）通过JavaScript应用;在源代码中看不多，而inspect元素在a元素或img元素上没有显示title属性。

Jquery css：这两种悬停文本之间的区别是什么

2 个答案: