Question

我试图让Div在悬停时更改其背景颜色，但它无效。

---------- ----------- HTML

   <div class="home-circles" style="background-color:#92cd00">
        <span style="color:#1C263C"><b>About Me</b></span>
        </div>

   <div class="home-circles" style="background-color:#FFCF79">
    <span style="color:#663333"><b>Music</b></span>
    </div>

    <div class="home-circles" style="background-color:#E5E4D7">
    <span style="color:#097054"><b>Hi Morgane</b></span>
    </div>

---------- ------------ CSS

.home-circles {
    width:250px;
    height:250px;
    border-radius: 200px; 
    margin:25px;
    float:left;
    text-align:center;
    vertical-align:middle;
    line-height:250px;
    font-size:50px;
    font-family:rochester;

    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

.home-circles:hover
{
    cursor:pointer;
    background-color:#fff;
}

问题似乎是div中的style属性。 Div中指定的背景颜色似乎取代了.home-circles：hover中指定的颜色。有没有办法绕过它而不改变.home-circles的CSS？

Answer 1

由于您在HTML中使用了home-circles，background-color:#FFCF79 ....所有div的内联样式，因为它会覆盖您定义的样式在您的外部CSS background-color:#E5E4D7。

您可以在此处使用background-color:#fff媒体资源：

!important

<强> Fiddle Demo

当样式声明使用！important规则时，这个声明覆盖CSS中的任何其他声明，无论在何处它在声明列表中。虽然，！重要无关具有特异性。使用！important是不好的做法，因为它使你努力调试，因为你打破了你的自然级联样式表

基本上，你可以使用.home-circles:hover { cursor:pointer; background-color:#fff !important; }，但不鼓励它。我建议您将内联样式移动到外部CSS文件中。

Answer 2

在hover css中使用！important

.home-circles:hover
{
    cursor:pointer;
    background-color:#fff !important;
}

DEMO

注意：必须覆盖内联样式，因为您在style中提供背景颜色，应使用!important覆盖它。

When Using !important is The Right Choice

在CSS中使用！important通常意味着你是自恋的＆amp; 自私或懒惰。尊重开发者......

Answer 3

你犯了一个小错误。

首先，你必须知道css的层次结构。在你的div标签内联css背景中第一优先，这就是你的悬停行动不起作用的原因。您的默认背景颜色应来自css类，然后悬停颜色将正常工作

希望它能帮到你

Answer 4

使用！important属性！这将覆盖内联CSS。

Answer 5

<html>
    <head>
        <style type="text/css">
            .mydiv
            {
                width:100px;
                height:100px;
                background-color:red;
            }
            .mydiv:hover
            {
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">
        </div>
    </body>
</html>

用标签中的样式更改Div的背景颜色？

5 个答案: