Question

当光标悬停在元素上时，我正在尝试更改元素的背景颜色。此转换适用于更改字体大小，但由于某种原因不适用于背景颜色。这是我的CSS代码。

.ul01 a,p{
    height: 100%;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

.companyName{
    float: left;
}

.ul01 a{
    padding-left: 30px;
    padding-right: 30px;
    width: 90px;
    float: right;
    transition: font 1s, background-color 1s;
}

.ul01 a:hover{
    background-color: red;
    font-size: 30px;
}

这是我的HTML代码：

<nav id="nav">
<ul class="ul01">
    <li><p class="companyName"> Company Name </p></li>
    <li><p class="blank"></p></li>
    <li><a href="#facebook"> Facebook </a></li>
    <li><a href="#Twitter"> Twitter </a></li>
</ul>

这是一个简单的导航栏。

我刚刚在代码中找到了这个：

li a:hover:not(.active) {
    background-color: darkgray;
}

我删除了它，一切似乎都运行良好，谢谢大家下次我会更仔细地看一下建议。

Answer 1

它适用于我的Chrome。为了确保它适用于所有浏览器，如果您为非悬停状态定义background-color，则会更好，因此浏览器会确定它应该设置的动画颜色是什么当它被徘徊时。

Answer 2

看看这个，li应为display:block。

.ul01 a,p{
    height: 100%;
    display: inline-block;
    color: black;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

li {
   display:block;
}

.ul01 a{
    padding-left: 30px;
    padding-right: 30px;
    width: 90px;
    float: right;
    transition: font 1s, background-color 1s;
}

.ul01 a:hover{
    background-color: red;
    font-size: 30px;
}

<nav id="nav">
<ul class="ul01">
  <li><p><a href="#facebook"> Facebook </a></p></li>
    <li><p><a href="#Twitter"> Twitter </a></p></li>
    <li><p class="companyName"> Company Name </p></li>
    <li><p class="blank"></p></li>
    <li><p><a href="#facebook"> Facebook </a></p></li>
    <li><p><a href="#Twitter"> Twitter </a></p></li>
</ul>

HTML，CSS悬停背景过渡

2 个答案: