Как я могу заставить кнопки бутстрапа исчезать при наведении

Я только начал использовать bootstrap, и я создал несколько навигационных кнопок на своей странице, и они потрясающие! Но когда вы наводите курсор на кнопки, он мгновенно меняется на белый, но я хочу, чтобы он исчез в белый цвет. Я также хотел бы, чтобы он исчез в синий цвет, как только ваша мышь больше не висит на кнопке. Как это можно сделать?Как я могу заставить кнопки бутстрапа исчезать при наведении

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    </div> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <img src="logo.png"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main"> 
 
      <p>This is the home page.</p> 
 
      
 
     </div> 
 
     
 
     <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-15 Anonymous

Просто добавьте CSS transition к якорям, как этот фрагмент кода:

.nav-pills li a{ 
 
    /* 0.5s is the amount of time it take to change colors */ 
 
    transition: 0.5s background ease-in-out; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    </div> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <img src="logo.png"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main"> 
 
      <p>This is the home page.</p> 
 
      
 
     </div> 
 
     
 
     <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-15 18:28:51 AVAVT

По какой-то причине, когда я изменить количество времени от 0,5 с до 0,1 с или даже 0,01 секунды, чтобы быстрее и быстрее исчезать. –

Может быть, ваш css кэширован, попробуйте ctrl + shift + r – AVAVT

Да, это сработало спасибо –

Вы хотите transition в background собственность. Вы можете сделать это с .nav a { transition: background .25s; }

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
    <style> 
 
    .nav a { 
 
     transition: background .25s; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    </div> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <img src="logo.png"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main"> 
 
      <p>This is the home page.</p> 
 
      
 
     </div> 
 
     
 
     <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-15 18:26:21

Как я могу заставить кнопки бутстрапа исчезать при наведении

ответ

Смежные вопросы