6

CSS コード:

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}

.css3_nudge ul li a:hover {
   background-color: #efefef;
   color: #333;
   padding-left: 50px;
   border-right: 1px solid red;
}

HTML コード:

<div class="css3_nudge nudge">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>

トランジションは、境界線以外のすべての要素で正常に機能しています。400 ミリ秒の終わりに表示されるだけで、境界線には影響しません。

私が達成しようとしているのは、新しい Google Gmail ボタンのような効果です。

助けてくれてありがとう

4

1 に答える 1

10

これは非常に簡単な修正です。ホバー効果の前に既に存在する境界線が必要です。したがって、以下のborder-right: 1px solid #fff;ように設定してください：

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
   border-right: 1px solid #fff; /* added property */
}

次に、トランジションは、境界線を作成するのではなく、境界線の色を効果的に変更するだけです。

于 2011-07-11T15:36:30.197 に答える