logo标签列表

悬停时元素未显示

javascripthtmlcss
4
我制作了一个基本的网站标题，相应的菜单应该在您悬停在选项上时出现，但它不起作用。当悬停在“主页”、“插入”、“设计”、“表格”、“信息”等选项上时，应该出现相应的菜单。我已经制作了菜单，并对它们进行了"display:none"处理，以使它们消失，并在选项上放置"display:block"，以使菜单在您悬停在它们上面时出现。请问错误在哪里，帮帮我。 

ol {
  list-style: none;
}

li {
  float: left;
  margin-left: 9%;
  font-size: 20px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;
  display: none;
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#li:hover {
  background-color: white;
}

#insert:hover+#insertmenu {
  display: block;
}

#view:hover+#viewmenu {
  display: block;
}

#table:hover+#tablemenu {
  display: block;
}

#design:hover+#designmenu {
  display: block;
}
<ol>
  <li> Home </li>
  <li id="insert"> Insert </li>
  <li id="view"> View </li>
  <li id="table"> Table </li>
  <li id="design"> Design </li>
  <li> Info </li>

</ol>

<br> <br> <br>

<ol>
  <li id="insertmenu">
    Photos Videos Table
  </li>

  <li id="viewmenu">
    Chart Pictures Videos
  </li>

  <li id="tablemenu">
    Chart Pictures Videos
  </li>

  <li id="designmenu">
    Chart Pictures Videos
  </li>

</ol>

2
请尝试使用 #insert:hover ，#insertmenu 而不是 #insert:hover + #insertmenu。 - Manuel Espinosa
2
你把子菜单放在不同的列表中有什么特别的原因吗？你可以合并一些元素（以及很多CSS）。 - Cédric
2
HTML结构一开始就是错误的，这一点被塞德里克指出。子菜单应该是菜单的子元素，而不是它自己的独立元素。 - Rickard Elimää
请参考 https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp 以获取更多信息。您还可以在左侧的链接中查找“带下拉菜单的响应式导航栏”、“子导航菜单”和“超级菜单”。 - Rickard Elimää
@Sudhir 我正在学习编程，试图弄清楚如何为网站制作一个可用的菜单。 - Priyank
显示剩余5条评论
3个回答
2
使用CSS确实可以实现，但是由于您使用的嵌套结构，“设置/布局”不允许这样做。
没有CSS选择器允许您移出
    元素并查找第二个
      中的其他
    1. 元素。
      此外，CSS中的“+”运算符也无法在此处工作，因为它只查找直接相邻的元素（如果我没有弄错的话！请自行验证）。
      您要查找的运算符是“tilde”运算符“~”。
      我提供了一个可行的示例，可能更好地解释了我的意思： 

      .fake-li {
  float: left;
  margin-left: 9%;
  font-size: 20px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;
  display: none;
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

li:hover {
  background-color: white;
}

#insert:hover ~ #insertmenu {
  display: block;
}

#view:hover ~ #viewmenu {
  display: block;
}

#table:hover ~ #tablemenu {
  display: block;
}

#design:hover ~ #designmenu {
  display: block;
}
      <div class="fake-li">Home</div>
<div id="insert" class="fake-li">Insert</div>
<div id="view" class="fake-li">View</div>
<div id="table" class="fake-li">Table</div>
<div id="design" class="fake-li">Design</div>
<div class="fake-li">Info</div>

<br />
<br />
<br />

<div id="insertmenu" class="fake-li">Photos Videos Table</div>
<div id="viewmenu" class="fake-li">Chart Pictures Videos</div>
<div id="tablemenu" class="fake-li">Chart Pictures Videos</div>
<div id="designmenu" class="fake-li">Chart Pictures Videos</div>

1
可怕的化妆，请不要将其作为起点。相反，看一下语义标记，并且不要仅在此处使用div。 - cloned
2
@flx 很好的回答。如果问题所有者更改了他的HTML结构，那么使用纯CSS是可能的。但在他的情况下，由于他的HTML结构，使用CSS是不可能的。那么他必须使用Javascript。正如我在我的答案中已经指出的那样。我给你+1赞，因为使用更改后的DOM的CSS解决方案将是一个很好的解决方案。干杯！ - Maik Lowrey
1

更新

针对您的HTML结构，您无法仅使用CSS实现此目标。您需要使用JavaScript。请查看此小型可工作示例。我仅稍微修改了您的代码。但是您将看到它的工作原理，并可以根据您的需求进行调整。

function showBox(sel) {  
  const el = document.getElementById(sel);
  el.classList.remove('hide');  
}

function hideBox(sel) {
  const el = document.getElementById(sel);
  el.classList.add('hide');    
}
ol {
  list-style: none;
}

li {
  float: left;
  margin-left: 9%;
  font-size: 25px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;  
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%; 
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;  
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;  
}

ol li:hover {
  background-color: white;
}

.hide {
  display: none;
}
<ol>
  <li> Home </li>
  <li id="insert" onmouseover="showBox('insertmenu')" onmouseout="hideBox('insertmenu')"> Insert </li>
  <li id="view" onmouseover="showBox('viewmenu')" onmouseout="hideBox('viewmenu')"> View </li>
  <li id="table" onmouseover="showBox('tablemenu')" onmouseout="hideBox('tablemenu')"> Table </li>
  <li id="design" onmouseover="showBox('designmenu')" onmouseout="hideBox('designmenu')"> Design </li>
  <li> Info </li>

</ol>

<br> <br> <br>

<ol>
  <li id="insertmenu" class="hide">
    Photos Videos Table
  </li>

  <li id="viewmenu" class="hide">
    Chart Pictures Videos
  </li>

  <li id="tablemenu" class="hide">
    Chart Pictures Videos
  </li>

  <li id="designmenu" class="hide">
    Chart Pictures Videos
  </li>

</ol>

0

我只用CSS就完成了工作。我只改变了ol/ul部分。我把菜单放在ol的主标题内部作为ul，而不是使用单独的ol来显示菜单，现在它可以正常工作了。

ol {
list-style: none;
}


li {
float:left;
margin-left:7.5%;
font-size:25px;
font-family: calibri;
padding:8 20 8 20;
background-color:skyblue;
border-radius: 20px;
margin-top: 5px;
border-top: 5px rgb(53, 53, 185) groove;
border-bottom: 5px rgb(53, 53, 185) groove;
position:relative;
}

#insertmenu {
font-size: 25px;
background-color: skyblue;
width:100px;
padding:20 10 20 10;
font-family:calibri;
border-radius: 10px;
border-left:4px rgb(20, 20, 119) solid;
border-right:4px rgb(20, 20, 119) solid;
margin-top:40px;
margin-left:-60px;
display: none;
position:absolute;
}

#viewmenu {
font-size: 25px;
background-color: skyblue;
width:100px;
padding:20 10 20 10;
font-family:calibri;
border-radius: 10px;
border-left:4px rgb(20, 20, 119) solid;
border-right:4px rgb(20, 20, 119) solid;
margin-top:40px;
margin-left:-60px;
display: none;
position:absolute;
}

#tablemenu {
font-size: 25px;
background-color: skyblue;
width:100px;
padding:20 10 20 10;
font-family:calibri;
border-radius: 10px;
border-left:4px rgb(20, 20, 119) solid;
border-right:4px rgb(20, 20, 119) solid;
margin-top:40px;
margin-left:-60px;
display: none;
position:absolute;
}

#designmenu {
font-size: 25px;
background-color: skyblue;
width:100px;
padding:20 10 20 10;
font-family:calibri;
border-radius: 10px;
border-left:4px rgb(20, 20, 119) solid;
border-right:4px rgb(20, 20, 119) solid;
margin-top:40px;
margin-left:-60px;
display: none;
position:absolute;
}

li:hover{
    background-color: white;
}

#insert:hover #insertmenu {
    display:block;
}

#view:hover #viewmenu {
    display:block;
}

#table:hover #tablemenu {
    display:block;
}

#design:hover #designmenu {
    display:block;
}
<ol>
    <li> Home </li>
   
    <li id="insert"> Insert
     <ol> 
         <li id="insertmenu"> 
             Photos 
             Videos
             Table

         </li>
        
    </ol> </li>
    
    <li id="view"> View 
    <ol> 
        <li id="viewmenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol></li>
    
   <li id="table"> Table
    <ol> 
        <li id="tablemenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol> </li>
   
   <li id="design"> Design 
    <ol> 
        <li id="designmenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol> </li>
   
   <li> Info </li>
    
</ol>

1
感谢您分享您的决定和反馈。两种方式（1.仅使用CSS，2.JS解决方案）都很好，您可以自由选择。如果您的HTML代码增长，也许需要切换。对于您上面的当前代码，有一个小提示：它看起来不完整。 - Maik Lowrey
@MaikLowrey 我还在学习编程，不是很懂。此外，每当下拉菜单出现时，它们会移动所有其他元素。因此，如果我在网站上有一个菜单下面的图像，整个图像将向下移动以为下拉菜单腾出空间。有没有一种好的方法可以制作出现在所有其他元素上方的下拉菜单？ - Priyank
1
这是正确的。使用相对定位和绝对定位来实现这一点，可以避免滑动效果。 - Maik Lowrey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接