Hover Property not working on full Div but rather on children divs

Question

I have created a box like this:

Now i wanted to have a hover property to show a transition for this whole div like this:

.plan-box {
    transition: all .2s ease-in-out !important;
  }

.plan-box :hover{
    transform: scale(1.03) !important;
}

but the issue is that rather than hover applying on while div it is applied on children divs, so for example if i hover over the 4.90 only that part is animated, but i want to animate whole box.

Full code snippet : https://jsfiddle.net/jzktwm7g/

score 3 · Accepted Answer · answered Jun 18 '19 at 06:39

3

Remove space on hover .plan-box :hover to .plan-box:hover

.plan-box:hover {
    transform: scale(1.03) !important;
  }

https://jsfiddle.net/lalji1051/81cs7tpu/1/

answered Jun 18 '19 at 06:39

Lalji Tadhani

14,041
3
23
40

Thanks alot, it worked. but can you please explain why space was causing issue? – Mustahsan Jun 18 '19 at 06:40
css selector space means child element not target element – Lalji Tadhani Jun 18 '19 at 06:42
thankyou, i will accept the answer after time limit – Mustahsan Jun 18 '19 at 06:43
3

`.test :hover` means you are targeting a `:hover` element (which can't exist) that is a descendant of an element with the class `test`, so something like `
<:hover> ` If you remove the space it means you want to apply the styles when hovering on the class.
– cloned Jun 18 '19 at 06:47

score 0 · Answer 2 · answered Jun 18 '19 at 06:50

0

You would need to apply a negative scale on hover on children elements.

Here is a link that may help you: https://teamtreehouse.com/community/how-to-prevent-child-element-affected-by-parents-hover-state

Example: http://cssdeck.com/labs/zictzyap

answered Jun 18 '19 at 06:50

Dileep

174
8

Hover Property not working on full Div but rather on children divs

2 Answers2