Question

我有一个B类元素，其中包含以下css

.B {display：none; }

和A类元素，当鼠标悬停在

上时具有以下css

A：悬停.B {display：block; }

我想要实现的css效果是当鼠标悬停在A类元素上时，会出现B类元素。它是否正确？目前它没有给我我想要的东西。在此先感谢您的帮助

Answer 1

你的CSS应该有用。

但如果.B是.A中唯一的元素，.A的可见大小可能是0px x 0px。

这意味着：hover伪类永远不会被触发。

您可以使用css强制.a的大小，或者在其中添加一个不可见元素以扩展其大小。

Answer 2

CSS不允许您为DOM树的任意元素执行此操作。你必须使用JavaScript。

Answer 3

如果.B类是.A类的子级，那么它将起作用。

此处的示例有效http://tinkerbin.com/V7ELzMRM，因为.B是.A的孩子，而http://tinkerbin.com/EhEYIlJL它不起作用，因为.B不是{{1}的孩子}}

工作演示：http://tinkerbin.com/V7ELzMRM

Answer 4

这只有在.B嵌套在.A中或者在DOM中它旁边可以尝试时才有效：

.A:hover + .B {
   display:block;
}

您可以在此处测试：http://cssdesk.com/Mwzzv

如果不是你需要使用一些JS（在这种情况下是jQuery）

$(".A").hover(function(){ $(".B").show() },function(){ $(".B").hide() });

Answer 5

你的css是绝对正确的，但为此请记住以下HTML应该可以正确地处理你的css

<div class="A">
  <div class="B">
  </div>
</div>

如果您的Html与上述不同，请使用jQuery

Answer 6

您可以使用jquery：

$(documnet).ready(function(){
  $(".A").hover(function(){
    $(".B").css("display", "block");
  });
});

或者你可以使用它：

$(documnet).ready(function(){
  $(".A").mouseenter(function(){
    $(".B").css("display", "block");
  });

$(".A").mouseleave(function(){
  $(".B").css("display", "none");
   });
});

CSS将鼠标悬停在元素A上但css对元素B的影响

6 个答案: