问题描述
HTML
body{
margin:0;
padding:0;
background-image: url(tiger.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family:'Sigmar One',cursive;
}
.logo{
color:white;
font-size: 60px;
font-family: 'Sigmar One',cursive;
margin-left: 30px;
margin-top: -5px;
opacity: .8;
}
.menu{
list-style: none;
list-style-position: inside;
float: right;
margin-top: -120px;
font-family: 'Sigmar One',cursive;
}
ul li{
display: inline-block;
margin: 0 30px 0 0;
}
a{
text-decoration: none;
color:white;
font-size: 17px;
transition-duration: 2s;
}
**a:hover{
color: green;
opacity: .9;
}**<!DOCTYPE html>
<html>
<head>
<title>Layout with HTML and CSS</title>
<link rel="stylesheet" href="Layout1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Sigmar+One&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Timings</a></li>
<li><a href="">Diet</a></li>
<li><a href="">Weather<a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping
to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>
</body>
</html>我尝试过： li a:悬停 ul li a:悬停 .menu ul li a:hover .menu a:hover
大家好，请参阅有关 a:hover 样式的 see css 文件，我已经在其他元素上使用了悬停并且它工作正常，我已经尝试了几种与块和列表的组合，但仍然无法正常工作。请指导我了解为什么它不起作用。
.content
{
align-items: center;
text-align:center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc
{
font-size: 45px;
font-family:'Sigmar One',cursive;
color: green;
/* border: 1px solid red; */
opacity: 1;
margin-bottom: -20px;
}
.content .bc
{
font-family: Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn
{
justify-content: center;
padding-left: 60px;
}
button
{
background-color: transparent;
width: 300px;
height: 60px;;
border-radius: 7px;
color: white;
font-weight: bolder;
border:2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover
{
background-color:green;
color: black;
}
解决方法
请确保whitespace和:之间没有hover
a: hover ❌
a:hover ✔
只需添加
a:hover {
color: red;
font-weight: bold;
}
它就像一个魅力
.content {
align-items: center;
text-align: center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc {
font-size: 45px;
font-family: 'Sigmar One',cursive;
color: green;
/* border: 1px solid red; */
opacity: 1;
margin-bottom: -20px;
}
.content .bc {
font-family: Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn {
justify-content: center;
padding-left: 60px;
}
button {
background-color: transparent;
width: 300px;
height: 60px;
;
border-radius: 7px;
color: white;
font-weight: bolder;
border: 2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover {
background-color: green;
color: black;
}
a:hover {
color: red;
font-weight: bold;
}<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Timings</a></li>
<li><a href="">Diet</a></li>
<li><a href="">Weather<a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>悬停效果有效，但这些元素位于 .logo 后面。尝试将 position 添加到 .menu 使其出现在 .logo 上：
body {
margin: 0;
padding: 0;
background-image: url(tiger.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Sigmar One',cursive;
background-color: orange;
}
.logo {
color: white;
font-size: 60px;
font-family: 'Sigmar One',cursive;
margin-left: 30px;
margin-top: -5px;
opacity: .8;
}
.menu {
list-style: none;
list-style-position: inside;
float: right;
margin-top: -120px;
font-family: 'Sigmar One',cursive;
position: relative;
}
ul li {
display: inline-block;
margin: 0 30px 0 0;
}
a {
text-decoration: none;
color: white;
font-size: 17px;
transition-duration: 2s;
}
a:hover {
color: green;
opacity: .9;
}
.content {
align-items: center;
text-align: center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc {
font-size: 45px;
font-family: 'Sigmar One',sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn {
justify-content: center;
padding-left: 60px;
}
button {
background-color: transparent;
width: 300px;
height: 60px;
;
border-radius: 7px;
color: white;
font-weight: bolder;
border: 2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover {
background-color: green;
color: black;
}<!DOCTYPE html>
<html>
<head>
<title>Layout with HTML and CSS</title>
<link rel="stylesheet" href="Layout1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Sigmar+One&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Timings</a></li>
<li><a href="">Diet</a></li>
<li><a href="">Weather<a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>
</body>
</html>ul li a:hover{
color: green !important;
opacity: .9 !important;
}
它肯定会起作用。试试这个。