Question

当我徘徊到某个div时，我试图取消隐藏div，虽然它取消隐藏，但它仅适用于最后一个div。

HTML

<div id="nav" style="margin: 0 auto; width: 500px;">
    <a href="#">
        <div id="nav1" style="width:99px; height: 50px; border-right: thin               solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav2" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav3" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav4" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav5" style="width:100px; height: 50px; float: left; background: red;"></div>
    </a>
    <div id="hidden"></div>
</div>

CSS

#hidden {
    width: 100px;
    height: 50px;
    background: blue;
    position: absolute;
    opacity: 0.4;
    display: none;
}

a:hover + #hidden {
    display: block;
}

Answer 1

在悬停实例中将+更改为〜：

a:hover ~ #hidden {
    display: block;
}

另外，请尝试使用display inline-block 。这将决定元素的高度。

查看更新的小提琴：http://jsfiddle.net/ArtemFitiskin/yCPj2/4/

#nav {
    font-size: 0;
    position: relative;
}

#nav a {
    display: inline-block;
    width: 99px; 
    height: 50px; 
    border-right: thin solid black;
    background: red;
    font-size: 14px;
}

#hidden {
    width: 100px;
    height: 50px;
    background: blue;
    position: absolute;
    opacity: 0.4;
    display: none;
    top: 0;
}

#nav a:hover ~ #hidden {
    display: block;
}

Answer 2

你只需要更改某个代码

a:hover ~ #hidden {
    display: block;
}

JSFIDDLE

Answer 3

在容器div上触发你的悬停：

#nav:hover #hidden {display: block; }

http://jsfiddle.net/yCPj2/6/

取消隐藏div不正常工作

3 个答案: