Header 按钮悬停颜色
Header Button Hover Colour
我刚接触网络开发大约 2 周,我正在制作一个网站。我一直试图让悬停在 header 按钮上起作用,但我找不到解决方案。这是代码。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
</head>
<body>
<div class="banner">
</div>
<div class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">ORBAT</a></li>
</ul>
</div>
CSS:
/*stylesheet */
body {
margin: 0;
padding: 0;
background: #ccc;
overflow-x: hidden;
font-family: 'PT Sans'
}
/*header*/
.banner {
background-image: url('http://www.respectfulrevolution.org/sites/all/themes/curiouser_respect/graphics/header.png');
width: 100%;
height: 100px;
}
.nav {
width: 100%;
height: 90px;
position: fixed;
background-color: #444;
}
.nav ul {
list-style: none;
}
.nav li{
display: inline-block;
padding: 15px 20px 15px 20px;
margin: 0;
background-color: #3f3f3f;
}
.nav a {
text-decoration: none;
color: #fff;
font-size: 1.250em;
}
.nav a:hover {
background-color: #028482;
opacity: 50%;
}
/*end of header*/
我已经尝试过相对位置和显示块之类的东西。
请检查此 CSS 代码:
.nav {
width: 100%;
position: relative;
background-color: #444;
min-height: 1px;
}
.nav:after,
.nav:before{
display: table;
content: " ";
clear: both;
}
.nav ul {
list-style: none;
}
.nav li{
display: inline-block;
margin: 0;
}
.nav li a {
border-radius: 3px;
text-decoration: none;
color: #fff;
font-size: 1.250em;
padding: 15px;
background-color: #3f3f3f;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a:hover,
.nav li a:focus {
background-color: #028482;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a.active{
background-color: #028482 !important;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
我刚接触网络开发大约 2 周,我正在制作一个网站。我一直试图让悬停在 header 按钮上起作用,但我找不到解决方案。这是代码。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
</head>
<body>
<div class="banner">
</div>
<div class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">ORBAT</a></li>
</ul>
</div>
CSS:
/*stylesheet */
body {
margin: 0;
padding: 0;
background: #ccc;
overflow-x: hidden;
font-family: 'PT Sans'
}
/*header*/
.banner {
background-image: url('http://www.respectfulrevolution.org/sites/all/themes/curiouser_respect/graphics/header.png');
width: 100%;
height: 100px;
}
.nav {
width: 100%;
height: 90px;
position: fixed;
background-color: #444;
}
.nav ul {
list-style: none;
}
.nav li{
display: inline-block;
padding: 15px 20px 15px 20px;
margin: 0;
background-color: #3f3f3f;
}
.nav a {
text-decoration: none;
color: #fff;
font-size: 1.250em;
}
.nav a:hover {
background-color: #028482;
opacity: 50%;
}
/*end of header*/
我已经尝试过相对位置和显示块之类的东西。
请检查此 CSS 代码:
.nav {
width: 100%;
position: relative;
background-color: #444;
min-height: 1px;
}
.nav:after,
.nav:before{
display: table;
content: " ";
clear: both;
}
.nav ul {
list-style: none;
}
.nav li{
display: inline-block;
margin: 0;
}
.nav li a {
border-radius: 3px;
text-decoration: none;
color: #fff;
font-size: 1.250em;
padding: 15px;
background-color: #3f3f3f;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a:hover,
.nav li a:focus {
background-color: #028482;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}
.nav li a.active{
background-color: #028482 !important;
transition: background 0.3s ease, color 0.3s ease;
-webkit-transition: transition: background 0.3s ease, color 0.3s ease;
-moz-transition: transition: background 0.3s ease, color 0.3s ease;
}