如何在这上面提供工具提示?

时间:2011-06-12 06:29:15

标签: css

这是我菜单开头的几行。这应该足够了 - 这是一个标准的纯CSS下拉菜单

<!-- start of menu -->
<div class="menu" style="width:100%; margin-left:auto; margin-right:auto">
  <ul>
    <li><a href="welcome.php">Home</a></li>
    <li><a href="welcome.php">Input data</a>
      <ul>
      <li><form action="input.php"  method="post"><div><input type="hidden" name="db" value="a" class="menu_item_button"><button class="menu_item_button">a</button></div></form></li>
      <li><form action="input.php"  method="post"><div><input type="hidden" name="db" value="b" class="menu_item_button"><button class="menu_item_button">b</button></div></form></li>
      </ul>
    </li>

你会看到我正在为每个链接使用一个表单,因为我想在整个站点中使用POST,没有GET。

一切都很好,但......我永远无法抗拒额外的。

我有一些菜单项的描述性文字,如果用户将鼠标悬停在菜单项上,我想将其显示为工具提示。

AFAIK,我只能用HREF来做 - 这是正确的吗?

当我尝试这样做时,我无法让它在W3C验证 - HREF不被允许,即使我将它包装在DIV或Span中。

那么 - 如果用户将鼠标悬停在那些LI上,我有什么方法可以获得工具提示吗?


更新:道歉 - 我忘了提到我不允许使用JS。

2 个答案:

答案 0 :(得分:1)

使用title属性

title="Your tooltip"

像这样(example):

<!-- start of menu -->
<div class="menu" style="width:100%; margin-left:auto; margin-right:auto">
    <ul>
        <li title="Your tooltip"><a href="welcome.php">Home</a></li>
        <li title="Another tooltip"><a href="welcome.php">Input data</a>
            <ul>
                <li title="Yet another tooltip"><form action="input.php"  method="post"><div><input type="hidden" name="db" value="a" class="menu_item_button"><button class="menu_item_button">a</button></div></form></li>
                <li title="And another tooltip">
                    <form action="input.php"  method="post">
                        <div>
                            <input type="hidden" name="db" value="b" class="menu_item_button">
                            <button class="menu_item_button">b</button>
                        </div>
                    </form>
                </li>
            </ul>
        </li>
    </ul>
</div>

可以在所有元素上使用它,除了:

  

applet,base,basefont,head,html,meta,param,script,title

来自About.com's Attribute Documentation

答案 1 :(得分:-2)

对于辅助功能,我建议您将所有获取变量转换为发布变量,方法是将下面的代码段包含在脚本之上。那就是你使用PHP。它将所有获取变量转换为后期变量..

// get vars to post vars */
if(isset($_GET)) {
   foreach ($_GET as $key => $val) {
   $_POST["$key"] = $val;
}}

这将使网站更易于访问。 您的链接将如下所示:

<li><a href="input.php?db=b">B</a></li>