how can set the class:hover?

Question

I have the following Html and CSS code the problem is when I want to style the links by using class:hover(home button) the styling not work but when I try to style it by id (help button) its work how can make the class hover work?

b
html, 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.container{
width: 99%;
margin:0;


}
#subheader{
 width: 100%;
 height: 30px;
 background:#ffc0cb;
 color:#fff5f0;
 
}
#subheader img {

 margin-top: 7px;
 margin-left: 2px;
 float: left;

}
#subheader p{
 float: left;
 margin-top: 7px;
 font-size: medium;
 margin-left: 4px;
 font-weight: bold;

}
#subheader a{
 float: right;
 line-height: 30px;
 color: #fff5f0;
 text-decoration: none;
 margin-left:20px ;
 font-weight: bold;
 border: 1px;
 border-color:#000;
 font-family: 'neckar';
 
}
a.button {
border: none;
text-decoration: none;
cursor: pointer;
font-size: 16px;
background-color: #ffc0cb;
color: #fff5f0;

}
.subbutton a.button:hover{

    background-color: #ffc0cb;
    color:#000;
    
}
#button2:hover{

    background-color: #ffc0cb;
    color:#000;
    
}

<!DOCTYPE html>
<html>
<head>
<title>Lale Store</title>
<meta charset="UTF-8"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://www.fontstatic.com/f=neckar" />

</head>
<body>
 <div id="warpper">
  <div id="header">
      <div id="subheader">
          <div class="container">
            <section>
              <p>handmade with love </p> <img src="C:\Users\HP\Desktop\website\img\16x16.png">
            </section>
            <section class="subbutton">
               <a class="button" id="button1"href="#">home</a>
               <a  class="button" id="button2"href="#">help</a>
            </section>
             
          </div>

  


        </div>


  </div>


</div>



</body>


</html>

score 1 · Answer 1 · edited Jul 10 '22 at 17:12

Your issue is related to CSS priorities.

As shown in the browser debugger, the color: #000; from .subbutton a.button:hover is being overriden by color: #fff5f0 from #subheader a.

The reason for that is because #subheader a is considered more precise than .subbutton a.button:hover, because of the presence of an ID.

Since your other button is styled with #button2:hover (which also contains an ID), its priority is higher, as shown here:

_{(source: heysora.net)}

This question has already been answered here as well.

Your choices are:

Either replace .subbutton a.button:hover with #subheader .subbutton a.button:hover
Or append !important after color: #000;. This is less clean but still works.

how can set the class:hover?

1 Answers1