CODEWITHSUNDEEP
htmlcss
Zinan Nadeem
Zinan Nadeem

Reputation: 199

Section hover active and inactive by CSS3

I am making a pricing table by html and css3 . But facing problem to deactivate the active hover section when i hover non active sections.

Preview: http://goo.gl/1KHzC6

In the preview website there is a featured section name "standard" and its -15px top to highlight properly but i want to make it 0px from top when i hover other sections. As well as when i do not hover any sections the "standard" sections remain -15px top. Please help me out.

Upvotes: 0

Views: 569

Answers (1)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

Cheat by using :hover behaviours on the parent container.

HTML for example:

<main>
    <div></div>
    <div class="default"></div>
    <div></div>
    <div></div>
</main>

Short CSS for example:

div {
    position:relative;
    top:15px;
    transition:top 500ms;
}
div:hover, div.default {
    top:0;
}
main:hover div.default:not(:hover) {
    top:15px;
}

The last rule resets the position of the default element if the container is hovered but the default element isn't - so it must be over another of the prices.

Sample fiddle.

Upvotes: 1

Related Questions