Question

对于我的html表单，似乎我无法创建跨浏览器悬停并按下<button> 的状态。

我真的很想要它，因为它可以创造良好的用户反馈（以及优雅的外观和感觉）。 使用<a> 这很容易，但会破坏可访问性规则。

我该怎么办？

根据要求，举例：

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li>
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

button.submit
{
    background:#F99;
    font-size:3em;
}

button.submit:hover /* white button with colored text */
{
    background:#FFF;
    color:#F99;
}

Answer 1

我认为自己一遍又一遍地使用可访问性的模式是从每个人都可以访问的模式开始，并在客户端用首选解决方案替换它。然后，如果他们没有这项技术，它就会优雅地降级。具体来说，我们在这里讨论javascript。

例如，首先使用表单中的普通按钮。无论是否启用了javascript，这都适用于所有人。然后使用javascript将该按钮替换为锚标记（这样你就可以使用：悬停在你的css中），或者只是使用javascript来执行你想要的悬停效果（如果你使用的是jQuery，你可以将一个事件绑定到按钮的mouseover）。

这意味着没有启用javascript并且没有使用支持更高级的浏览器的小部分人：悬停使用不会看到您的悬停效果，但您将确保它始终优雅地降级。

Answer 2

Internet Explorer 6仅支持：悬停的hover CSS属性。

如果你支持IE6，你需要使用像@charles建议的一些javascript解决方案，基本上你需要动态地添加/删除元素的类。我通常将这些“修复”放在带有条件注释的IE6.js文件中。

使用jQuery是可选的，但它确实有助于减少您必须编写的javascript数量以实现这些效果。

Answer 3

我没有对此进行广泛测试，但尚未跨平台测试，但对于Midori和FF3.x（在Ubuntu 8.04上），button标记采用以下样式：hover，：focus和：active（类似于a标签）。

这当然有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>

    <title></title>

    <style type="text/css">

    button {color: #f00; 
        background-color: #ccc;
        border: 0 none transparent;}
    button:hover {color: #0f0; }
    button:active {color: #00f; }

    </style>

</head>

<body>

    <div id="wrapper">

    <form method="post" action="" enctype="form/multipart">

        <fieldset>
            <label for="input1">Label 1:</label>
            <input id="input1" name="input1" type="text" />

            <label for="input2">Label 2:</label>
            <input id="input2" name="input2" type="text" />
        </fieldset>

        <fieldset>

            <button class="reset" type="reset">Reset</button>
            <button class="submit" type="submit">Submit</button>

        </fieldset>

    </for>

    </div>

</body

</html>

演示于：http://www.davidrhysthomas.co.uk/so/buttons.html

进一步编辑以回答问题编辑：

您可以尝试添加第三个列表元素并命名它们（我还建议使用字段集而不是列表，但让我们继续使用您所拥有的内容。）

<head>
<link rel="stylesheet" type="text/css" href="regularStylesheet.css" />

    <!--[if ie lte7]>
<link rel="stylesheet" type="text/css" href="ie-adaptations.css" />
    <![endif]-->

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li class="submit-buttons">
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
        <li class="submit-links">
            <a href="where/ever/you/send.html">Send</a>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

然后在常规CSS中添加：

li.submit-buttons
{
    display: block;
}

li.submit-links
{
    display: none;
}

并在IE-adaptations.css中反转：

li.submit-buttons
{
    display: none;
}

li.submit-links
{
    display: block;
}

它无论如何都不是完美的，但它不会使用form-mode来扰乱设备，并且应该允许按钮显示;并且只应强制IE 7（及以下）显示链接。所以......希望不要过多地破坏可访问性。

Answer 4

使用javascript，你也可以像Jon建议的那样用a-tag替换按钮。这是使用jQuery但你可以使用普通的javascript或任何其他库来执行此操作：

 var ahtml = "<div class='button'><a href=#>blabla</a></div>"; //whatever the HTML is for the styled a tag
 $('button.submit') //select button
    .hide()//Hide the button
    .after(ahtml) //insert the styled a html
    .next() //find the inserted html
       .click( function(e) { //add click behaviour to the inserted HTML
         $(this).prev().click(); //trigger click event of submit button
         return false; //stop both event bubbling and event triggering
       });

这样你就有了按钮，适用于没有javascript的人。并且还为使用javascript的人提供了一个很好的样式标记。

Answer 5

即使你能找到解决方案（Matt Ross提到的那些也可能是一个）你应该更好地选择可访问性而不是抛光的外观和感觉！

Answer 6

jQuery解决方案如何：像这样：

$("input:button").mouseover(function(e) {
    $(this).addClass("hovered");
}).mouseout(function(e) {
    $(this).removeClass("hovered");
}).mousedown(function(e) {
    $(this).addClass("pressed");
}).mouseup(function(e) {
    $(this).removeClass("pressed");
});

Answer 7

我可能会把脚放在嘴里或者什么东西在这里，但我只是想指出别的东西要考虑。但是，您决定解决此问题，如果您的按钮或锚点应该执行某些操作（例如删除记录或更改您的银行帐户），那么我强烈建议您确保执行回发（POST）。这是按钮通常在表单中执行的操作。不要执行GET，这通常是achor所做的。

这是因为GET很容易被搜索引擎，浏览器预先发布者和其他东西所引发。 POST被识别为执行某个操作但未自动跟踪的内容。

另一方面，如果你的“按钮”正在进行某种查询，那么GET就可以了。

你也可以用锚点做一个帖子，特别是用javascript。

在他们的脑子里有这种新鲜感的人可以亲自填写一堆我所掩盖的细节。

Answer 8

你绝对可以单独使用CSS（对于糟糕的ie6来说有点js）。

首先，让它在FF中运行：hover，：active，等等。然后添加一些js以在悬停时向按钮添加类，单击....将这些类添加到：hover，：active ...声明（按钮：hover，button.hover {color：red}）然后关闭。你需要为safari和IE做一些按摩，但绝对可以做到。

另一种可能性是先前建议的混搭。如果我没弄错的话，JAWS会读取具有可见性的元素：隐藏（不确定窗口的眼睛）。而不是使用js删除按钮或将其设置为display：none，将其设置为不可见应该适用于跨用户代理。然后我们JS将链接点击绑定到表单提交。

我应该使用<button>或<a>, submitting a styled web form</a> </button>

8 个答案:

进一步编辑以回答问题编辑：