Question

当我将鼠标悬停在它上面时，我希望DIV的background-color能够改变。如果我没有在DIV的background-color财产中设置style，我可以让它工作，但我不明白为什么这会阻止悬停颜色被应用？

<style>
.hovery {
    cursor: pointer;
    display: block;
    float: left;
    margin-bottom: 4px;
    margin-right: 10px;
    border: 1px solid gray;
    border-radius: 6px;
}
.hovery:hover {
    background-color: black;
}
</style>

当我创建DIV（在PHP中）时，我使用下面的代码，并且我在创建时设置background-color属性，以便我可以设置＆＃39;选择＆＃39;一个到不同于所有其他DIV的颜色：

echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n";

我发现如果我不在上面的代码中设置background-color，那么悬停颜色更改有效，但为什么要设置{{ 1}}阻止background-color颜色工作？他们有两种不同的东西吗？

Answer 1

这称为特异性，您可以充分利用内联样式。避免它或制作javascript技巧（比如悬停添加类名）。你也可以这样做：

.hovery:hover {
    background-color: black !important;
}

但我不喜欢它。如果内联样式对您的要求是强制性的，请使用!important。否则，删除内联样式。

Answer 2

您最好在PHP中为元素添加一个类，然后使用CSS控制该类的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="middle topic"> <div id="inputnav"> <button id="sendd">SEND</button> </div> <input type="text" value="" id="iPf"> <div id="oPf"> output </div> </div>。

这样做的另一个好处是保持代码干净，避免使用内联样式（超越每个规则），您可以通过Javascript轻松更改类，这反过来会改变颜色。

如果我提前设置，DIV背景颜色在悬停时不会改变

2 个答案: