Copied css styling behaves differently on two elements?-CodePudding

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" ></a></li>
            <li><a href="Homepage.html">Home</a></li>
            <li><a href="">About Us</a></li>
            <li ><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 >
        <ul>
            <li ><a href="">Learn More</a></li>
            <li ><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!

CodePudding user response：

.SignUp2 :hover

You don't need to put space there.

.SignUp2:hover

You should use that like this.

CodePudding user response：

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

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

CodePudding user response：

(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 lis to inline-block, remove the float and add display: block; to the a tag inside it, they should behave identical.

CodePudding user response：

please using the same class for applying same css