CODEWITHSUNDEEP
htmlcss
user3382063
user3382063

Reputation: 45

change background color of Div with style in tag?

I'm trying to make a Div change its background color on hover but it's not working.

----------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;
}

The problem seems to be the style attribute in the div. The background color specified in the Div seem to supersede the one specified in .home-circles:hover. Is there a way to get around it without changing the CSS for .home-circles?

Upvotes: 0

Views: 21368

Answers (5)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15777

just use !important in hover css

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

DEMO

Note:inline styles must be overrided,since you are giving background-color in style u should use !important to override it.

When Using !important is The Right Choice

Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...

Upvotes: 1

Felix
Felix

Reputation: 38112

Since you're using inline style for all your divs with class home-circles such as background-color:#FFCF79, background-color:#E5E4D7.... in your HTML which will override the style you've defined in your external CSS background-color:#fff.

You can use !important property here:

.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

So basically, you can use !important but it's discouraged. I'd suggest you to move your inline styles to external CSS files instead.

Upvotes: 2

Bharat Jangir
Bharat Jangir

Reputation: 470

<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>

Upvotes: 0

user3242679
user3242679

Reputation: 31

Use the !important property! This will override the inline CSS.

Upvotes: 0

user1400699
user1400699

Reputation:

You have a small mistake.

First of all you have to know hierarchy of css. In your div tag inline css background which is first priority that's why your hover action not working. your default background color should come from css class then hover color will work properly

Hope it will help you

Upvotes: 0

Related Questions