Question

我做了一个div，另一个div（隐藏了）并且悬停了，但如果你将鼠标悬停在第一个div上，它就不会显示隐藏的div ... 这是我的代码：

<html>
<head> 
<title> Welkom op FreeAppzToday </title>

    <style>


    #home   {background: black; width:6%; height:6%; margin-left: -1%; margin-top: -2.2%}
    #home:hover{background-color: #1A49B4}
    #text-home  {font-size:225%; margin-left: 15%; color: white}
    a   {text-decoration: none;}

        #games  {background: black; width:6%; height:6%; margin-left: 5%; margin-top: -5.1%}
        #text-games     {font-size:250%; margin-left: 1.5%; color: white}
        #games:hover {background-color: #1A49B4}

        #action {background: black; width:6%; height:3%; margin-left: 5%; margin-top: -1.1%;}
        #text-action    {font-size:125%; margin-left: 1.5%; color: white}
        #games:hover,    #action {visibility: visible;}
        #action:hover {background-color: #1A49B4}
        #action     {visibility: hidden;}

</style>


</head>
<body>


<div id='home'><a href='index.php'><p id='text-home' >Home</P></a></div>
<div id='games'> <a href='games/index.php'><p id='text-games'>Games</p></a></div>
<div id='action'><a href='games/action.php'><p id='text-action'> Action</p></a></a>
</div>






</body>

</html>

Answer 1

您的代码存在一些问题，有些代码没有正常关闭，所以我没有打扰它。

请参阅此基本示例以了解：

http://jsfiddle.net/8mrugaoo/

您需要一个容器div，在悬停时会将visibility:visible分配给子元素。

<div id='home'>
    <a href='index.php'><p id='text-home' >Home</p></a>
</div>

<div id="games_container">
    <div id='games'>
        <a href='games/index.php'><p id='text-games'>Games</p></a>
    </div>
    <div id='action'>
        <a href='games/action.php'><p id='text-action'> Action</p></a>
    </div>
</div>

魔法发生在这里：

#action {visibility:hidden;}

#games_container:hover #action {visibility:visible;}

Answer 2

@ Sharky的答案已更新为使用兄弟选择器~

Fiddle

CSS：

p {
   margin:0;
   padding:0;
}
div {
   padding:8px;
}

#action {
   visibility:hidden;
}

#action:hover {
   visibility:visible;
}

#games:hover ~ #action {
   visibility:visible;
}

要防止#action链接从#games链接鼠标移出后隐藏，您需要将相同的CSS添加到#action:hover选择器，并添加为p元素在链接里面有一个边距，我不得不删除它并将它放在父div上。

这个悬停代码有什么问题

2 个答案: