hover not working, is this due to flex properties?

Question

I want to change some properties on hover. For some reason it does not work when I use a class selector.

This bare minimum works:

<div id="items">
    <div class="item" id="item1"></div>
    <div class="item" id="item2"></div>
    <div class="item" id="item3"></div>
    <div class="item" id="item4"></div>
    <div class="item" id="item5"></div>
</div>

.item {
    width: 50px;
    height: 50px;
    background: red;   
}

.item:hover {
    background: orange;
}

#item1:hover {
    background: orange;
}

However, I have a case (see fiddle) where it is not working and I really wonder why. If I use a id selector then all is fine. If I use a class selector then it stops working. Is this caused by using flex? And is there a fix for this?

http://jsfiddle.net/clankill3r/u8rg90am/5/

Answer 1

The reason this is not working for you is because you've used ID's on each individual item to specify it's color. An ID will always weigh more than a class when it comes to CSS.

That is why in your example the hover style you added to the class does not effect the element because a color is already set using it's ID.

There are several ways you can solve this. The best way however if you want to keep the code structure that you have is to use the !important tag. Like this:

.item:hover {
    background: orange!important;
}

You could also switch out your ID's for classes which would also be a valid option.

Answer 2

The problem is the weight of the selectors. Because you have the id #item with the background-color. When you overwrite with .item:hover the weight of the selector won't overwrite the id.

The solution is to write the items with specific classes for the background.

For examples :

.item.bg-green {
      background-color: green;
 }
.item.bg-green:hover {
      background-color: orange;
}

I don't recommend using id as a selector in css. And also don't recommend using !important. When you get into bigger projects that can cause problems.

Fully working example:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}


.bg-green {
    background: green;
}
.bg-blue {
    background: blue;
}
.bg-orange {
    background: orange;
}
.bg-purple {
    background: purple;
}
.bg-brown {
    background: brown;
}


#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

 #header {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 60px;
    background: red;
}

#items {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    /* transition: all 2s; */
}

@media screen and (orientation: landscape) { 
   
    #items {
        flex-direction: column;
    }

 
}


@media screen and (orientation: portrait) {

    #items {
        flex-direction: row;
    }    
    
}


/* why does this not work?*/
.item:hover {
    background: orange;
}


#header:hover {
    background: orange;
}

<div id="container">
    <div id="header">HEADER</div>
    <div id="items">
        <div class="item bg-green" id="item1"></div>
        <div class="item bg-blue" id="item2"></div>
        <div class="item bg-orange" id="item3"></div>
        <div class="item bg-purple" id="item4"></div>
        <div class="item bg-brown" id="item5"></div>
    </div>
</div>

Answer 3

It's not flex that's giving you problems. ID's have a higher precedence than Classes.

Adding an important flag will force the class to override the ID.

.item:hover {
  background: orange !important;
}

I think it's worth mentioning that many people don't style things using ID's for this reason. Many people keep ID's for JavaScript. However, this is not written in stone anywhere, it's just a common practice.

Answer 4

don't know the exact reason but it's because you are mixing id's and classes together. You set background for id and then trying to use :hover on class. Set it all in class and it will work. Don't use id's where u don't have to

Answer 5

Just give !important will works like:

.item:hover {
    background: orange !important;
}

Because

#item2 {
    background: none repeat scroll 0 0 blue;
}

will remove/overlap above background and so on.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}


#item1 {
    background: green;
}
#item2 {
    background: blue;
}
#item3 {
    background: orange;
}
#item4 {
    background: purple;
}
#item5 {
    background: brown;
}


#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

 #header {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 60px;
    background: red;
}

#items {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    /* transition: all 2s; */
}

@media screen and (orientation: landscape) { 
   
    #items {
        flex-direction: column;
    }

 
}


@media screen and (orientation: portrait) {

    #items {
        flex-direction: row;
    }    
    
}


/* why does this not work?*/
.item:hover {
    background: orange !important;
}

/* this works*/
#item1:hover {
    background: orange;
}

#header:hover {
    background: orange;
}

<div id="container">
    <div id="header">HEADER</div>
    <div id="items">
        <div class="item" id="item1"></div>
        <div class="item" id="item2"></div>
        <div class="item" id="item3"></div>
        <div class="item" id="item4"></div>
        <div class="item" id="item5"></div>
    </div>
</div>

Check Fiddle.