0

当用户将鼠标悬停在一个单独的框上时，我试图让一个框出现。我无法让它工作。

这是html

<div class="division_left" id="account">
      <div class="container"></div>
      <span>Account</span>
</div>

这是CSS

#account:hover + .container {
visibility: visible;
}

.container {
    position: absolute;
    visibility: hidden;
    height: 300px;
    width: 500px;
    bottom: 40px;
    left: 40px;
    background-color: #fff;
    border: 1px solid #000;
}

我再次试图让container鼠标#account悬停在上面。它只是没有出现。提前致谢！

4

4 回答 4

2

该元素是其兄弟而不是其兄弟#account的父元素-您需要“直接后代”选择器，而不是“相邻兄弟”选择器，即.container>+

#account:hover > .container {
    visibility: visible;
}

代替

#account:hover + .container {
    visibility: visible;
}

对“直接后代”选择器的支持如下：

IE 7、IE8、IE9 pr3、FF 3.0、FF 3.5、FF 3.6、FF 4b1、Saf 4.0 Win、Saf 5.0 Win、Chrome 4、Chrome 5、Opera 10.10、Opera 10.53 和 Opera 10.60

活生生的例子

于 2013-04-08T18:12:24.677 回答
1

这就是你在 DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/之后的样子

div {
    display: none;
}

a:hover + div {
    display: block;
}
于 2013-04-08T18:13:05.997 回答
1

.container不是其孩子的兄弟姐妹，#account因此您需要改用直接子组合器>

#account:hover > .container

jsFiddle

于 2013-04-08T18:13:12.527 回答
1

为什么不使用 JQuery Hover 函数呢？比其他任何东西都好和稳定。你也可以玩效果。

HTML：

<div class="division_left" id="account">
  <div class="container" style="display:none"></div>
  <span id="showAccount">Account</span>
</div>

查询：

$('#showAccount').hover(function(){
   $('.container').toggle('fade');
});

这将为您提供比常规 CSS 更好的效果。

试试看告诉我..

或者，如果您需要，我将添加 JSFiddle。

更新： http: //jsfiddle.net/V8QbY/ - 这里是

问候，

拉胡尔。

于 2013-04-08T18:15:06.817 回答