Hover changing div higher in the hierarchy

Question

I have problem with cascading. Here's my current code: http://jsfiddle.net/Jackenmen/TF27R/1/

CSS:

#pdorota:hover {
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

HTML:

<div id="pdorota">
    <div id="napisdorota">Dorota</div>
    <img id="pldorota" src="http://6best.pl/planety/dorota.png">
</div>

When I am hovering mouse on picture, it rotate, but when I am hovering mouse on not visible div (#napisdorota), the picture also rotates. How must I change this code, could this rotate only when I'm hovering mouse on picture?

Answer 1

You can add style visiblity:hidden on the div and set it back to visible when hovering. Note that opacity:0 still makes your div receive mouse events.

#napisdorota { 
  ...
  visibility:hidden;
}
#pdorota:hover #napisdorota {
 opacity: 1;
 visibility:visible;
}

Demo.

Answer 2

Just change the hover selector to target #pldorota (see JSFiddle):

#pldorota:hover {
  ...
}