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

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

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

你可以在这里使用 !important 属性:

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

Fiddle Demo

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets

所以基本上，您可以使用 !important 但不鼓励这样做。我建议您改为将内联样式移动到外部 CSS 文件。