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

Question

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

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

以下是鼠标悬停的css代码

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

有人对此有所了解吗？

Answer 1

使用title HTML属性。在经过一段短暂的时间后，它会导致弹出窗口。

它也是原生的和语义的。

<强> Live Example

Answer 2

使用title-attribute

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

或google for“jquery tooltip”

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

Answer 3

您可以使用某个包含position: absolute的div，然后使其成为：

<强> 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>