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

Question

我还是 HTML 和 CSS 的新手，无法理解这一点。我有两个包含 <li> 元素的 <ul> 列表。我用第一个 ul 列表中的一个 li 元素创建了一个按钮，然后复制了 html 和 css 但是在悬停时，它们的行为不同。我已将它们分成两个类以尝试找出问题所在，但我不知道如何解决它。

按钮 1（在导航中）- 整个按钮充当元素并在悬停时改变颜色

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

按钮 2 - 只有按钮内的文本充当元素，并且只有文本背景颜色在悬停时发生变化。

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

还有 CSS 在拆分为两个之前我在两者上使用的样式

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

我已经创建了一个 jsfiddle 代码。这可能真的很简单，我只是想念它！

非常感谢任何意见或建议！

Answer 1

.SignUp2 :hover

你不需要把 space 放在那里。

.SignUp2:hover

你应该像这样使用它。

Answer 2

您在列表中设置的样式是“list”而不是“a”标签。要解决此问题，请将 a 添加到您的选择器：

来自

li.SignUp2 a

到

li.SignUp2 a

并添加显示：块；或显示：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

（已编辑）

区别（在你的 JS fiddle 中）在于 a 标签的 li 父元素和第二个 a 标签本身：在第一种情况下（导航菜单）li 有 display: inline-block，在第二种情况下，您对其应用了 float: left，这使得应用的 display: block 无效并将其更改为 block .这会改变其中 a 标签的大小，因此会改变 background-color 悬停时区域的大小。

如果您将两个 li 都设置为 inline-block，删除浮动并将 display: block; 添加到其中的 a 标记，它们的行为应该相同。

Answer 4

请使用相同的 class 应用相同的 css

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

Copied css styling behaves differently on two elements?

html

css

html-lists