0

ナビゲーション リンクのスタイルを設定しています。リンクにカーソルを合わせると色が変わりますが、右側に数ピクセル移動し、カーソルをホバリングから外すと再び正常になります。

マイ ナビゲーション CSS

.logo-wrapper {
  padding-bottom: 85px;
  background-color: #2e3639;

}

.logo-items{
  display: inline-block;
  position: relative;
  color: white;
  font: "Times New Roman";
  float: left;
  margin-left: 500px;
  margin-top: 30px;
  text-decoration: none;

}

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
}

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

.logo-items span {
  margin-right: 10px;
}

マイナビゲーション

<div class="logo-wrapper">
                <div class="logo-items">
                  <span>Logo</span>
                  <span>
                   <%= link_to "Tags", tags_path %>
                  </span>
                  <span>Pages</span>

                </div>
          </div>
4

4 に答える 4

2

灰色の背景効果を得るために :hover にパディングを追加したため、これを取得しています。

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

ジャンプを止める簡単な方法は、最初にリンクにパディングを追加して、幅が常に同じになるようにすることです。

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
  padding:4px;
}

ここにフィドルを追加しましたhttp://jsfiddle.net/domjgreen/uNKm8/

于 2013-10-02T14:25:21.967 に答える
2

これをやってみてください:-

padding: 4px 4px 4px 4px;" " にも " "を追加し.logo-items a{てください...更新されたコードを参照してください:-

.logo-items a {
    text-decoration: none;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom:solid 1px transparent;
    padding: 4px 4px 4px 4px;
}

フィドルを参照してください:- http://jsfiddle.net/eETN8/

お役に立てれば！

于 2013-10-02T14:24:36.510 に答える
1

paddingonを削除する.logo-items a:hoverか、同じものを に追加paddingし.logo-items aます。

padding: 4px 4px 4px 4pxは、4px のパディング (要素の端とそのコンテンツの間のスペース) を設定するための CSS 省略形ですが、これはホバー状態にのみ適用されるため、話している数ピクセルの動きを引き起こしています。

また、同じものなpadding: 4px 4px 4px 4px;ので短縮できます。padding: 4px;ホバー時の背景色の変化の見栄えを良くするためにパディングを追加したと思いますので、追加padding: 4pxする.logo-items aだけで準備完了です!

于 2013-10-02T14:24:51.703 に答える
0

境界線の問題です。ピクセルの動きを避けるために、ホバーする前に境界線を付ける必要があります

于 2016-10-09T14:21:57.433 に答える