5

我创建了一个使用autofocus="autofocus". 我注意到奇怪的事情，当表单具有自动对焦时，我的导航上的转换被启动。我只在 Firefox 中注意到它。有什么我做错了还是只是firefox的行为（错误）？

形式： 

<form method="post" action="" id="contactForm">
    <textarea id="contactF" name="message" autofocus="autofocus" tabindex="1" placeholder="Type your message here" required="required"></textarea>
    <input type="submit" id="contactS" name="submit" value="Send" tabindex="3" />
    Your Name: <input type="text" id="contactN" name="name" tabindex="2" placeholder="Type your Name" required="required" />
</form>

导航的 CSS：

#menu ul li {
    width: 251px;
    text-align:center;
    display: inline-block;
    background: #ddd;
    height: 30px;
    line-height: 30px;
    box-shadow: 126px 0 0px 0px #000 inset, -126px 0 0px 0px #000 inset;
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

}

#menu ul li:hover, #menu li.active {
    box-shadow: 0 0 0px 0px #000 inset, -0 0 0px 0px #000 inset;
}

#menu ul a:link,#menu  ul a:visited {
    display: block;
    font-size: 17px;
    width: 251px;
    text-decoration: none;
    font-weight: bold;
    color: #6DB7B5;
    margin:0 auto;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#menu ul a:hover, #menu li.active a {
    color: #FF6181;
}
4

1 回答 1

2

好的新尝试，经过一些阅读后，我发现这可能是转换的一般问题。如果发生这种情况，只有一个解决方法。

你必须为你的身体添加一个类

<body class="preload">

这个班级根本没有过渡

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

最后你必须用一点 js 删除 preload 类。

$("window").load(function() {
  $("body").removeClass("preload");
});

希望这会有所帮助，反馈会很好

于 2013-05-04T19:53:25.757 回答