“a”元素上的悬停效果不起作用但适用于按钮同一页面

如何解决“a”元素上的悬停效果不起作用但适用于按钮同一页面

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;
}

它肯定会起作用。试试这个。