已复制 css 样式在两个元素上的行为不同？

Question

I'm still new to HTML & CSS and can't figure this one out. I have two <ul> lists with <li> elements. I created a button out of one of the li elements in the first ul list, and then copied the html and css but on hover, they behave differently. I've split them into two classes to try identify the problem but I don't know how to fix it.

Button 1 (in nav) - the whole button acts as the element and changes colour on hover

<nav>
        <ul>
            <li><img src="Women in Tech-logos_transparent.png" width="150px"><a href="Homepage.html" class="Logo"></a></li>
            <li><a href="Homepage.html">Home</a></li>
            <li><a href="">About Us</a></li>
            <li class="SignUp"><a href="">Sign Up</a></li>
        </ul>
      </nav>

Button 2 - only the text inside the button acts as the element and only the text background colour changes on hover.

<div class="IntroCTA">
        <ul>
            <li class="SecondaryButton"><a href="">Learn More</a></li>
            <li class="SignUp2"><a href="">Sign Up</a></li>
        </ul>
      </div>

And the CSS styling I was using on both before splitting into two

    .SignUp {
  background-color: #F3ED01;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  border-radius: 50px;
  height: 40px;
  line-height: 40px;
  width: 150px;
  margin-right: 40px;
  margin-left: 20px;
  padding: 0 0 0 0;
}

.SignUp :hover {
  text-decoration: none;
  background-color: white;
  border-radius: 50px;
}

.SignUp a {
  
  text-decoration: none;
}

I've created a jsfiddle of the code. It's probably something really simple and I'm just missing it!

Really appreciate any input or advice!

Answer 1

.SignUp2 :hover

You don't need to put space there.

.SignUp2:hover

You should use that like this.

Answer 2

You are styling in your list the "list" and not the "a" tag. To fix this add a to your selector:

From

li.SignUp2 a

to

li.SignUp2 a

And add display: block; or display: inline-block;

li.SignUp2 a {
    display: block;


    background-color: #F3ED01;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    border-radius: 50px;
    height: 40px;
    line-height: 40px;
    width: 150px;
    margin: 10px 10px 10px 10px;
}

Answer 3

(edited)

The difference (in yours JS fiddle) is in the li parent elements of the a tags and the second a tag itself: In the first case (nav menu) the li has display: inline-block , in the second case you applied float: left to it, which makes the applied display: block invalid and changes it to block . This changes the size of the a tag inside it, and therefore the size of the area that changes background-color on hover.

If you set both li s to inline-block , remove the float and add display: block; to the a tag inside it, they should behave identical.

Answer 4

please using the same class for applying same css