0

私はウェブサイトで作業していて、css3 アニメーションに小さな問題を見つけました..「ホーム」ボタンをホバーすると、「私たちについて」リンクが押されます..それを防ぐにはどうすればよいですか? これがそのコードです：

<div class="menu"> <ul> <li id="one"><a href="">Home</a></li> <li id="two"><a href="">About us</a></li> </ul> </div>

.menu ul{
margin: 0;
padding: 0;}

.menu li{
font-family: Helvetica, Arial sans-serif;
margin: 20px 10px;
display: inline-block;
*display: inline;}

.menu a{
position: relative;
color: #999;
text-decoration: none;
padding: 20px;
background-color: #DDD;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
-border-radius: 0 0 20px 20px;
-webkit-box-shadow: inset 10px -3px 10px #ccc;}

.menu a:hover{
background-color: #eee;
font-size: 150%;
-webkit-box-shadow: 0 0 0 #eee;
text-shadow: 0 0 10px #fff;
-webkit-transition: 0.5s ease;}

http://jsfiddle.net/nsdbV/

ありがとう:D

4

1 に答える 1

0

font-size on:hoverを変更すると、要素のサイズが変更され、ブラウザに期待される動作になります。相対の代わりに使用しない限りposition: absolute、これを解決するために考えることができる唯一の方法は、変換プロパティを使用することです。ここであなたの例を少し修正しました：http://jsfiddle.net/nsdbV/2/

.menu a{
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.menu a:hover{
    -webkit-transform: scale(1.5);
}​

テキストを拡大するだけでなく、ボックス全体を 150% 倍に拡大します。上記で行った変更のみを示しましたが、jsfiddle リンクを使用すると、その使用方法がよくわかるはずです。CSS を少し調整する必要がありますが、うまくいけば、何かを続けることができます。

于 2012-04-13T08:47:28.743 に答える