Question

当我在鼠标悬停在菜单上时，我试图在div标签中显示一些内容。在这里，我试图在悬停在About上时显示div。但它不起作用。通常只检查评论部分。忽略休息！

这是我的HTML：

<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<a href="index.html"><img class="logo" src="Images/Logo.jpg"></a>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>

<!––The hovering Menu––>
<li class="dispmenu"><a href="#">About</a></li>

<li ><a href="#">Center</a></li>
<li ><a href="#">Team </a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Services</a></li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>

和CSS：

.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}

Answer 1

 .dispmenu:hover .submenu {

这些选择器之间有空格。空格是descendant combinator。

元素<div class="submenu">不是元素<li class="dispmenu">的后代。它是列表项的曾祖父母的兄弟姐妹。

CSS选择器无法描述向上 DOM树，因此如果没有这两种方法，您将无法实现此目的：

更改DOM的结构
使用JavaScript

理想情况下，您应该同时执行以下两项操作：

子菜单与菜单项完全断开连接没有多大意义。想想that type of data is normally represented。
在菜单消失之前你不能把时间延迟等东西放进去，这会使你想要创建的菜单对那些有一些无障碍需求的人产生挑战（例如关节炎的患者，很多人都难以移动鼠标一条直线，并将指针保持在菜单边框内。）

Answer 2

如果你走这条路，这是一个jQuery选项..

<强>拨弄

https://jsfiddle.net/Hastig/ns6j55zg/

您可以阅读.hover here

$('.dispmenu').hover(function() {
    $('.submenu').addClass('dispmenu-hover');
}, function() {
    $('.submenu').removeClass('dispmenu-hover');
})

body {
  margin: 0;
}
.container {
  /*width: 1000px;*/
  /*height: 1000px;*/
  margin: 0 auto;
  border: 1px solid gray;
}
header {
  overflow: hidden;
}
.logo {
  float: left;
}
.navigation ul {
  list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
  background-color: #e0e0d1;
  margin-top: 40px;
  /*width: 96px;*/
flex: 1;
  border: 1px solid lightblue;
  height: 40px;
  text-align: center;
  float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
  font-size: 11px;
  text-decoration: none;
  color: black;
}
li a:hover:not(.active) {
  color: #2485ba;
}
.active {
  color: #2485ba;
}
.submenu {
  background-color: darkblue;
  color: white;
  width: 684;
  height: 100px;
  margin-left: 312px;
  visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header class="head-nav">
    <a href="index.html"><img class="logo" src="Images/Logo.jpg"></a>
    <nav class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <!––The hovering Menu––>
        <li class="dispmenu"><a href="#">About</a></li>
        <li><a href="#">Center</a></li>
        <li><a href="#">Team </a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Testing</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </nav>
  </header>
  <div class="submenu">
    Hello
  </div>
</div>

Div在悬停时不显示

2 个答案: