悬停时如何使引导按钮消失
Posted
技术标签:
【中文标题】悬停时如何使引导按钮消失【英文标题】：How can I make my bootstrap buttons fade when hovered 【发布时间】：2017-07-04 13:55:41 【问题描述】：我刚开始使用引导程序，并在我的页面上创建了一些导航按钮，它们太棒了！但是当你将鼠标悬停在按钮上时，它会立即变为白色，但我希望它淡入白色。一旦您的鼠标不再悬停在按钮上，我也希望它淡化回蓝色。这怎么可能？
<!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>【问题讨论】：
【参考方案1】：只需将 CSS transition 添加到像 sn-p 这样的锚点：
.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>【讨论】：
由于某种原因，当我将时间从 0.5 秒更改为 0.1 秒甚至 0.01 秒时，它似乎并没有更快地淡入淡出。 可能是你的css被缓存了，试试ctrl+shift+r【参考方案2】：您想要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>【讨论】：
以上是关于悬停时如何使引导按钮消失的主要内容，如果未能解决你的问题，请参考以下文章
FLASH中鼠标悬停在某按钮上显示某个图层内容,移开后该图层消失.