懸停時未出現元素-有解無憂

我制作了一個基本的網站標題，當您將滑鼠懸停在選項上時應該會出現相應的選單，但它不起作用。當懸停在“主頁”“插入”“設計”“表格”“資訊”等選項上時，應出現相應的選單。我制作了選單并在它們上顯示：無以使它們消失并將 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>

uj5u.com熱心網友回復：

僅使用 CSS 確實是可能的，但由于您使用的嵌套，您有一個“設定/布局”不允許它。

沒有 CSS 選擇器可以讓您移出元素并在 seconds 內<ol>找到其他元素。<li><ol>

此外，CSS 中的運算子在這里也不起作用，因為它只查找直接相鄰的元素（如果我沒記錯的話！請自己驗證）。

您正在尋找的運算子是“波浪號”運算子~。

我提供了一個作業示例，可以更好地解釋我的意思：

顯示代碼片段

.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>

uj5u.com熱心網友回復：

更新

對于您的 HTML 結構，您無法使用 pur 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>

uj5u.com熱心網友回復：

我只需要使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467529.html

標籤：javascript html css

上一篇：為什么我不能將此span元素的文本顏色設定為白色

下一篇：如果容器正在使用`display：flex`，如何在`div`中將行移到列