Question

我有级联问题。这是我目前的代码：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>

当我将鼠标悬停在图片上时，它会旋转，但当我将鼠标悬停在不可见的div（#napisdorota）上时，图片也会旋转。我该如何更改此代码，只有当我将鼠标悬停在图片上时才会旋转？

Answer 1

只需将悬停选择器更改为定位#pldorota (see JSFiddle) ：

#pldorota:hover {
  ...
}

Answer 2

您可以在visiblity:hidden上添加样式div，并在悬停时将其设置回visible。请注意，opacity:0仍会使div接收鼠标事件。

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

悬停在层次结构中更高div

2 个答案:

Demo.