鼠标悬停上的消息弹出窗口

Question

我正在开发一个wordpress的网站。标题处有一个菜单栏。现在我想要的是，当我将鼠标悬停在菜单项上时，我应该收到一条消息弹出窗口。

在上面的情况下，当鼠标放在服务菜单项上时，它应该是“Umang服务”。

以下是鼠标悬停的css代码

    #access li a:hover 
    {
      text-decoration:underline;        
     }

有人对此有所了解吗？

Answer 1

使用title HTML属性。 在经过一段短暂的时间后悬停后会发生弹出窗口。

它也是原生的和语义的。

实例

Answer 2

使用title-attribute

<a href="#" title="Message">Hover!</a>

或谷歌搜索“jquery tooltip”

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Answer 3

你可以用一些有position: absolute div来做到这一点position: absolute然后让它像：

CSS

#access li a:hover #someAbsolutePositioningDiv
{
  display: block;    
  position: absolute;
  top: some value;
  left: some value;
}

#someAbsolutePositioningDiv
{
  display: none;
}

HTML

<ul id="access">
 <li>
   Text
   <div id="someAbsolutePositioningDiv">Some other text</div>
 </li>
</ul>

Answer 4

将li设置为position：relative，在其中放置另一个元素（popup-message）并给它position：absolute和display：none，并将其定位为left，top等（如：left：10px; top：-50px ;）到你想要的位置。 然后将其设置为在悬停时显示：

li:hover .popup-message {display:block;}

Answer 5

尝试这个

<element onmouseover="alert('text')">qwe</element>

要么

<element onmouseover="this.innerHTML='someText'"></element>