鼠标悬停显示数据

【问题标题】：mouseover to display the data鼠标悬停显示数据
【发布时间】：2016-11-08 16:54:16
【问题描述】：

经理的名字显示在页面上。我想在将鼠标悬停在“眼睛”图标上时显示经理的全名。是否有可用于执行此操作的 JavaScript？下面是我的代码。谢谢

<td><span class="eye"></span><s:property value="managerfullname" /></td>

【问题讨论】：

是的，有。但是到目前为止您尝试过什么？
什么经理？什么眼睛图标？那不是代码，它只是一段 HTML。你试过什么，等等等等
.eye:hover ~ s:property {display:block}
如果我正确地阅读了 Struts 属性，您只需将 title 属性添加到您的 span 元素并将您的属性值添加到标题中（引号和所有）：<span class="eye" title="<s:property value="managerfullname" />"></span>
谢谢克里斯。效果很好！！！

标签： javascript mouseover

【解决方案1】：

您不需要 JS 将 data-* 属性与 :after 伪和 :hover 一起使用

[data-surname]:hover:after{
  content: " " attr(data-surname);
}

&lt;span data-surname="C. Buljan"&gt;Roko&lt;/span&gt;

如果你想让它“弹出”而不是

[data-surname]{
  position:relative;
}
[data-surname]:hover:after{
  position: absolute;
  white-space: nowrap;
  top: 100%;
  left:0;
  background: #eee;
  padding: 4px 8px;
  content: attr(data-surname);
}

&lt;span data-surname="Roko C. Buljan"&gt;Roko&lt;/span&gt;

【讨论】：