我可以用：hover伪类来做到这一点吗？

Question

我熟悉：hover psuedo类，并将它用于元素以及我们都习惯的典型链接设置。然而，我试图做的是创造一种情况，将鼠标悬停在一个元素上会改变另一个元素的属性。例如，如果我将鼠标悬停在.block1上，＃block2将变为可见。我会认为.css看起来像这样...

.block1:hover div#block2 
{ 
    visibility:visible; 
} 

但这让我无处可去。思考？我知道我可以使用javascript来实现这一点（使元素出现和消失），但我很想找到一个纯CSS的解决方案。

Answer 1

如果第二个元素是第一个元素的后代，那么它将工作。

jsFiddle。

Answer 2

您想要更改的元素必须是您正在徘徊的元素的子元素。

范例CSS：

#navButton div.text { 
    display:none; 
} 

#navButton:hover div.text { 
    display:block; 
} 

这将使文本的div显示，如果你将鼠标悬停在使用id = “navButton” 的元素。

否则，使用jQuery的解决方案：

CSS：

#navButton div.text { 
    display:none; 
} 

.hover { 
    display:block; 
} 

的Javascript：

$("#navButton").hover(
    function() { 
     $("#navButton div.text").addClass("hover"); 
    }, 
    function() { 
     $("#navButton div.text").removeClass("hover"); 
    } 
); 

编辑：

如果悬停元素位于要修改的元素之前，那么也可以在CSS中为兄弟元素执行此操作。像这样：

#navButton + div.text { 
    display:none; 
} 

#navButton:hover + div.text { 
    display:block; 
} 

OR

#navButton ~ div.text { 
    display:none; 
} 

#navButton:hover ~ div.text { 
    display:block; 
}