2

我有一个 B 类元素，它具有以下 css

.B{ 显示：无；}

和 A 类的元素，当鼠标悬停在上面时，它具有以下 css

A:hover .B{ 显示:块; }

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

4

6 回答 6

1

你的 CSS 应该可以工作。

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

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

您可以使用 css 强制 .a 的大小，或者通过在其中添加不可见元素来拉伸其大小。

于 2013-02-05T13:14:40.797 回答
0

CSS 不允许您对 DOM 树的任意元素执行此操作。为此，您将不得不使用 JavaScript。

于 2013-02-05T13:09:20.313 回答
0

只要.B类是类的孩子，它就会起作用.A。

这里的例子它工作http://tinkerbin.com/V7ELzMRM因为它.B是子级http://tinkerbin.com/EhEYIlJL它不工作因为不是..A.B.A

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

于 2013-02-05T13:09:38.393 回答
0

这仅适用于 .B 嵌套在 .A 中或者如果它在 DOM 中的旁边，您可以尝试：

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

你可以在这里测试：http ://cssdesk.com/Mwzzv

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

$(".A").hover(function(){ $(".B").show() },function(){ $(".B").hide() });
于 2013-02-05T13:10:50.700 回答
0

您的 css 绝对正确，但请记住以下 HTML 应该可以正常工作您的 css

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

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

于 2013-02-05T13:15:16.667 回答
0

您可以使用 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");
   });
});
于 2013-02-05T13:16:12.027 回答