1

I have created a box like this:

enter image description here

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/

Mustahsan
  • 3,852
  • 1
  • 18
  • 34

2 Answers2

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/

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

Dileep
  • 174
  • 8