Дергается меню при наведении мышки

@МыЗаМир · Регистрация: 07.06.2016

Author24 — интернет-сервис помощи студентам

Создал меню в бутстрап
Название: Screenshot_24.png
Просмотров: 77

Размер: 15.8 Кб

мышка наведена на средний пункт и он дернулся потому что появилась граница, вот стили

CSS

.navigation1 .navbar-default .navbar-nav > li > a:hover, .navigation1 .navbar-default .navbar-nav > li > a:focus {
    border: 2px solid #b1a4a4;
    color: #fff;
    background-color: transparent;
    background: rgba(0, 0, 0, 0.5);
}
.navigation1 .navbar-default .navbar-nav > .active > a, .navigation1 .navbar-default .navbar-nav > .active > a:hover, .navigation1 .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
  } 
 
.navigation1 li.active a{
  /*background-color: transparent !important;*/
  border: 2px solid #b1a4a4;
  color: #fff;
  background: rgba(0, 0, 0, 0.5) !important;
}

Сделал отдельно для списка и когда новодим появляется граница и весь список дергается.
box-sizing: border-box;
не помагает, вот код примера с простыми списками

CSS

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootsrap Grid System</title>
    <!-- Подключаем целый бутстрап -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      ul{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      li:hover{
        -webkit-box-sizing: border-box;
        border: 2px solid #000;
        -moz-box-sizing: border-box;
      }
    </style>
  </head>
 
  <body>
    <!-- Body content goes here -->
    
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      
    </ul>
   
 
 
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
 
  </body>
</html>

Почему не работает box-sizing: border-box; ???
Я добавли бордер с цветом transparent и перестало дергать, но читал что должно работать box-sizing: border-box;

Вот пример с transparent

CSS

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootsrap Grid System</title>
    
    <style type="text/css">
      ul{
        }
      li{
          display: inline-block;
          border: 2px solid transparent;
        }
      li:hover{
          border: 2px solid #000;
        }
    </style>
  </head>
 
  <body>
    <!-- Body content goes here -->
    
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      
    </ul>
 
  </body>
</html>

Вот пример через box-sizing: border-box дергается

CSS

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootsrap Grid System</title>
    
    <style type="text/css">
      ul{
          bos-sizing: border-box;
        }
      li{
          display: inline-block;
          /*border: 2px solid transparent;*/
          box-sizing: border-box;
        }
      li:hover{
          border: 2px solid #000;
          box-sizing: border-box;
        }
    </style>
  </head>
 
  <body>
    <!-- Body content goes here -->
    
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      
    </ul>
 
  </body>
</html>

Как сделать чтобы второй пример не дергал?

@boilzzz · 10.08.2016, 22:53

песочница

CSS

ul{
          bos-sizing: border-box;
        }
      li{
        border: 2px solid #fff;
          display: inline-block;
          /*border: 2px solid transparent;*/
          box-sizing: border-box;
        }
      li:hover{
          border: 2px solid #000;
          box-sizing: border-box;
        }

HTML5

 <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      
    </ul>

@МыЗаМир · 11.08.2016, 14:17 **[ТС]**

boilzzz, Это тоже самое что через как я делал добавив границу черзе transparent.
Это не решение.

@МыЗаМир 0 / 0 / 0 Регистрация: 07.06.2016 Сообщений: 85
	11.08.2016, 14:17 [ТС]	3
	boilzzz, Это тоже самое что через как я делал добавив границу черзе transparent. Это не решение. 0

Дергается меню при наведении мышки

Решение