Home > Net >  Element not appearing on hover
Element not appearing on hover

Time：04-29

I made a basic website header and the respective menus should appear when you hover over the options but it doesn't work. When hovering over the options "Home" "Insert" "design" "table" "info" etc the respective menus should appear. I have made menus and did dispaly:none on them to make them disappear and put display:block on the options to make the menus appear when you hover over them. What is the mistake pls help.

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>

CodePudding user response：

It is indeed possible with CSS only but you have a "setup/layout" that won't allow it due to the nesting your are using.

There is no CSS selector that allows you to move OUT of the <ol> elements and find the other <li> elements INSIDE the seconds <ol>.

Additionally the operator in CSS won't work here either as it only looks for directly adjacent elements (if I'm not mistaken! Please verify for yourself!).

The Operator you are looking for is the "tilde" operator ~.

I've provided a working example that might explain better what I mean:

.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 >Home</div>
<div id="insert" >Insert</div>
<div id="view" >View</div>
<div id="table" >Table</div>
<div id="design" >Design</div>
<div >Info</div>

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

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

CodePudding user response：

Update

In your case with your HTML structure you cant archive this with pur CSS. You have to use Javascript. Take a look of this small working example. I refactor your code only a little bit. But you will see how it works and you can adjusting for your wishes.

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" onm ouseover="showBox('insertmenu')" onm ouseout="hideBox('insertmenu')"> Insert </li>
  <li id="view" onm ouseover="showBox('viewmenu')" onm ouseout="hideBox('viewmenu')"> View </li>
  <li id="table" onm ouseover="showBox('tablemenu')" onm ouseout="hideBox('tablemenu')"> Table </li>
  <li id="design" onm ouseover="showBox('designmenu')" onm ouseout="hideBox('designmenu')"> 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>

CodePudding user response：

I got to work with just CSS. I just changed the ol/ul part. Instead of having a separate ol for the menus, I put the menus inside the main headings of the ol as a ul and it works now.

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>

Page link：https//www.codepudding.com/net/389699.html

Prev:How to make product cards equal height Bootstrap5
Next:css overlapping background image with header
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding