CSSの振る舞い

Question

私のNavbarに問題があります。 色の切り替え効果を追加しましたが、その上にカーソルを置くとテキストが揺れます。ブラウザ（Chrome）を拡大または縮小した後に表示されます。 「揺れ」は一定に見えません。ここで

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); 
 
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); 
 

 
@font-face { 
 
\t font-family: 'BebasNeuewebfont'; 
 
\t src: url('../fonts/BebasNeuewebfont.eot'); 
 
\t src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype'); 
 
} 
 
body { 
 
\t background-color: #eee !important; 
 
} 
 
/* Navbar*/ 
 
.navbar { 
 
\t background-color: #fff !important; 
 
\t padding-top: 6px; 
 
} 
 
.navbar .navbar-nav>.active>a:hover,.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { background-color: #4375D7} 
 
.navbar .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, 
 
.navbar .navbar-nav>.open>a:focus { background-color: #4C89FF} 
 
.dropdown-menu { 
 
\t background-color: #fff !important; 
 
} 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #4375D7} 
 
.navbar { background-image: none; } 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; } 
 
.navbar { border-color: #353739} 
 
.navbar .navbar-brand { 
 
\t color: #4C89FF !important; 
 
} 
 
.navbar .navbar-brand:hover { color: #4375D7} 
 
.navbar .navbar-nav>li>a { color: #B0B0B0} 
 
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { color: #353739} 
 
.navbar .navbar-nav>.active>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus { 
 
\t background-color: #fff !important; 
 
} 
 
.navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus { color: #353739} 
 
.dropdown-menu>li>a { color: #B0B0B0} 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #fff} 
 
.navbar{ /* assigning the top bar to the entire navbar div element */ 
 
    text-align: center; 
 
    box-shadow: inset 0px 6px 0px #4C89FF; 
 
\t 
 
\t /* initial light-blue color to the top bar */ 
 
} 
 
.navbar .navbar-nav > .active > a, 
 
.navbar .navbar-nav > .active > a:hover, 
 
.navbar .navbar-nav > .active > a:focus { 
 
    color: #000; 
 
    background: #4C89FF; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #75A4FF; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
\t /* switch to a lighter color for active element */ 
 
} 
 

 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus { 
 
    color: #000; 
 
    background-color: #fff; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; 
 
\t 
 
\t -webkit-transition: all 0.3s ease-in-out; 
 
    \t -o-transition: all 0.3s ease-in-out; 
 
    \t -moz-transition: all 0.3s ease-in-out; 
 
    \t -ms-transition: all 0.3s ease-in-out; 
 
    -kthtml-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
\t 
 
\t /* switch to a darker-blue color on hover */ 
 
} 
 

 
.navbar-brand { 
 
    font-family: 'BebasNeuewebfont' !important; 
 
    font-size: 40px !important; 
 
    letter-spacing: 2px; 
 
    font-weight: 400 !important; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
} 
 

 
.navbar-brand:hover, 
 
.navbar-brand:focus { 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */ 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
\t padding-bottom: 35px; 
 
\t 
 
\t -webkit-transition: all 0.4s ease-in-out; 
 
    \t -o-transition: all 0.4s ease-in-out; 
 
    \t -moz-transition: all 0.4s ease-in-out; 
 
    \t -ms-transition: all 0.4s ease-in-out; 
 
    -kthtml-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
\t 
 
} 
 

 
.navbar a { 
 
    font-family: 'Quicksand', sans-serif; 
 
    font-weight: 600; 
 
} 
 

 
.navbar .navbar-toggle { 
 
    border-color: #333; 
 
    padding-top: 6px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="shortcut icon" type="image/jpg" href="#"> 
 
    <meta charset="utf-8"> 
 
\t 
 
<!-- fonts --> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css"> 
 
<!-- Stylesheets --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 

 
<!-- Navbar --> 
 
<header class="navbar navbar-fixed-top bs-docs-nav" role="banner"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-brand active">Brand</a> 
 
    </div> 
 
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Text</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
</body> 
 
<!-- JQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<!-- JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 
</html>

プロジェクトへのリンクです：

http://jsfiddle.net/XENONFFM/0yygc5q5/

Answer 1

あなたはノーボックスシャドウ（0PX）から、箱の影にアニメーション化しているので、それが揺れます（6px）。

個人的にはborderプロパティをbox-shadow以上に使用します。ここで重要なのは、境界/ボックスシャドウを事前に定義することですが、表示はしません。これを行うには、色を透明に設定して、ホバーするときに目的の色に設定します。

ここで何をすべきかのいくつかの擬似コードです：あなたはbox-shadowを使用し続けたい場合は

header { 
 
    border-top: 5px solid purple; 
 
} 
 
ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    float: left; 
 
    margin: -5px; 
 
    padding: 15px 25px; 
 
    border-top: 5px solid transparent; 
 
    transition: all 300ms ease-in-out; 
 
} 
 
li:hover { 
 
    border-top: 5px solid yellow; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 2</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

は、あなたのホバーセレクター（.navbar .navbar-nav > li > a:hover）からあなたにあなたのmargin、paddingとbox-shadowプロパティをコピーリンクセレクタ（.navbar .navbar-nav > li > a）を開き、色をtransparentに設定します。