Test
  • Test
    • ...">
    Clever Geek Handbook

    Can I inherit the background color from the hovering element?

    Html

    <ul>
    <li class="first active">Test</li>
    <li class="second">Test</li>
</ul>

    CSS

    ul li {
    padding: 10px
}

.first:hover {
    background-color: red;
}

.second:hover {
    background-color: grey;
}

.active {

}

    I want to display. An active item with the same state as: hover. My point here is to inherit the li color for active elements.

    Can this be done?

    http://jsfiddle.net/o3c6js03/

    +3


    source to share


    2 answers


    What you ask is impossible; the value inherit

    sets the property to the same as the corresponding property of the parent element.

    If you write separate styles for :hover

    each state anyway li

    , just add the class .active

    to the same rule - CSS rules can have multiple selectors, you just need to separate them with commas.



    For example:

    ul li{
    padding:10px
}
.first:hover,.first.active{
    background-color:red;
}
.second:hover,.second.active{
    background-color:grey;
}
    +3


    source


    Perhaps you want to achieve this:



    .first:hover,
.first.active {
    background-color: red;
}

.second:hover,
.second.active {
    background-color: grey;
}
    0


    source






    More articles:


    All Articles