Question

我正在尝试编码button，当您将鼠标悬停在其上/点击它时会改变颜色。但是，我遇到了一个问题。文本和div部分的边缘之间有一个空格，如果您将鼠标悬停在button上，它会变为黑色，但文字不会变为白色。我把color:white;。我不确定为什么这不能解决问题。

这是我的代码：

p {
    margin: 0px;
}


.button {

    width: 66px;
    height: 20px;
    border: 2px black solid;
    border-radius: 4px;
    padding: 5px;

}

.button:hover {

    background-color: black;
    color: white;
}

a {

    color: black;
    text-decoration: none;   
}

a:hover {

    color: white;  
}

<div class="button">
    <p> <a href="https://www.google.com">  Click Me! </a> </p>
</div>

Answer 1

只需将a:hover更改为.button:hover a 一切都会很棒。产品：＆gt;

p {
        margin: 0px;
    }
    
    .button {
        width: 66px;
        height: 20px;
        border: 2px black solid;
        border-radius: 4px;
        padding: 5px;
    }
    
    .button:hover {
        background-color: black;
        color: white;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    .button:hover a{
        color: white;
    }

<div class="button">

        <p> <a href="https://www.google.com">  Click Me! </a> </p>


    </div>

Answer 2

好的，所以继续这笔交易。你太复杂了。如果你对空格有问题，那因为＆lt; a＆gt;默认情况下，tag是内联的，它有时会在它的容器之间产生差距。

这是您的代码，已清理并正常工作：https://jsfiddle.net/m6dphvm1/

<a class="button" href="https://www.google.com">  Click Me! </a>

a.button {
  border: 2px black solid;
  border-radius: 4px;
  padding: 5px;
  color: black;
  text-decoration: none;
  display: inline-block;
}

a.button:hover {
  background-color: black;
  color: white;  
}

Answer 3

你的CSS的问题是你的锚（链接）颜色是黑色的，当你将按钮悬停在按钮上时，你将按钮的背景改为黑色，即锚颜色和背景都是黑色。由于该文字不可见。

将按钮的背景颜色或锚颜色更改为不同的颜色，这应该有效。例如，我正在将锚的颜色更改为蓝色。

.button:hover {
        background-color: black;
        color: white;
    }
    a {
        color: blue;
        text-decoration: none;   
    }

Answer 4

a是一个内联元素，意味着它被设计为嵌套在纯文本中（或者可能是其他内容）。它只占据文本周围的空白区域。

但是，a标签也完全允许根据HTML5规范包装元素（不是任何人都会阻止你，它只是惯例）。因此，如果您希望a标记占据整个空间，只需将其包裹在元素周围。

更好的是，只使用a标记。其余的基本上是多余的：

<a class="button" href="https://www.google.com">
    Click Me!
</a>

.button {
  width: 66px;
  height: 20px;
  border-radius: 4px;
  padding: 5px;
  color: black;
  border: 2px black solid;
}

.button:hover {
  background-color: black;
  color: white;
}

https://jsfiddle.net/hyp4a9ya/

如何在悬停时更改div的文本颜色

4 个答案: