鼠标悬停以显示数据

问题描述：

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

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

是的。但到目前为止您尝试过什么？ – giorgio

什么经理？什么眼睛图标？这不是代码，它只是一个HTML块。你试过了什么等，等等 – Liam

'.eye：hover〜s：property {display：block}' – adeneo

答

你不需要JS使用data-*属性与:after伪和:hover

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

<span data-surname="C. Buljan">Roko</span>

如果你想要它 “弹出” 比

[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); 
 
}

<span data-surname="Roko C. Buljan">Roko</span>

鼠标悬停以显示数据

相关推荐