2

CSS でプロパティを使用してtransitionいますが、境界線で正しく機能しません。移行はしますが、移行はしません。これが私のコードです。

#menu {
  width: 100%;
  height: 70px;
}
#menuitem {
  width: 150px;
  height: 70px;
  float: right;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
#menuitem:hover {
  border-top: 12px solid #000;
}
.menutext {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}
<body>
  <div id="menu">
    <div class="menutext" id="menuitem">CONTACT</div>
    <div class="menutext" id="menuitem">ABOUT</div>
    <div class="menutext" id="menuitem">PRICES</div>
  </div>
</body>

フィドル: http://jsfiddle.net/MhkTT/

4

4 に答える 4

1

border-topホバー以外のスタイルでプロパティを設定していません。ブラウザは何に戻るべきかわからないため、ジャンプするだけです。

これをに追加するだけ#menuitemです：

border-top: 0px solid #000

（または、移行元の色は何でも、色の移行がまったくない場合は白）

于 2013-10-03T12:22:35.807 に答える
0

それ以外の

border-top: 12px solid #FFF;

このCSSコードを与える

box-shadow:inset 0px 12px 0px 0px #000

http://jsfiddle.net/MhkTT/2/

于 2013-10-03T12:36:59.257 に答える
0

このような

デモ

CSS

#menuitem:hover {
    border-top: none;
}
于 2013-10-03T12:25:22.467 に答える