如何在按鈕懸停上顯示列表？

我想顯示按鈕懸停列表，但會發生什麼，只要我懸停在按鈕區域附近，文本顯示。如何在按鈕懸停上顯示列表？

.header_nav { 
 
    width: 800px; 
 
    height: 400px; 
 
} 
 
.header_nav ul { 
 
    list-style: none; 
 
} 
 
.header_nav ul ul { 
 
    display: none; 
 
} 
 
.header_nav ul ul #nav_button:hover>ul { 
 
    display: block; 
 
} 
 
.header_nav ul ul li >ul { 
 
    display: none; 
 
} 
 
.header_nav ul li:hover >ul { 
 
    display: block; 
 
}

<nav class="header_nav"> 
 
    <ul> 
 
    <li> 
 
     <input type="button" value="Button 1" name="nav_button" id="nav_button"> 
 
     <ul> 
 
     <li>Locations</li> 
 
     <li> 
 
      Mumbai 
 
      <ul> 
 
      <li>Txt 1</li> 
 
      <li>Txt 2s</li> 
 
      <li>Txt 3</li> 
 
      </ul> 
 
     </li> 
 
     <li>Delhi</li> 
 
     <li>Banglore</li> 
 
     <li>Nagpur</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

JS FIDDLE：https://jsfiddle.net/fhv7drst/

來源

2016-07-31 Mehul Chachada

這是因爲你的li元素是塊元素。

我改變了它內聯，並開始工作，按您的要求

HTML：

<li class="parentElement"> 
        <input type="button" value="Button 1" name="nav_button" id="nav_button">

CSS：

li.parentElement{ 
    display: inline; 
    }

這裏是工作提琴

https://jsfiddle.net/m73p8pea/

來源

2016-07-31 08:01:54

感謝您的幫助@rahul阿羅拉 –

原因是您的li元素是一個塊元素，這意味着它會自動嘗試跨越整個可用寬度。在你的情況下，這是最頂層元素提供的800像素。

你有兩種解決方案可供使用 - 一種是使列表元素成爲內聯塊元素（或簡單地說是內聯元素，儘管我更喜歡內聯塊，因爲塊是它的開始方式）來防止它企業跨越式的整個寬度：

.header_nav ul li { 
    display: inline-block; 
}

您也可以懸停在按鈕時，直接，沒有盤旋在它時觸發無序列表上的顯示變化的父列表項：

.header_nav #nav_button:hover + ul { 
    display: block; 
}

這是有可能的更好的解決方案，因爲它不會弄亂顯示器類型比你需要的更多，並且你更準確地描述你想要發生的事情 - 當按鈕懸停時顯示列表。

來源

2016-07-31 08:05:49 TheThirdMan

感謝信息這讓我理解這個概念太大明確@TheThirdMan –

-1

如果我正確地得到你的問題，那麼你想要顯示一個列表，只要你在一個按鈕上。你應該使用jQuery來做到這一點。像首先包括了jQuery文件從該網址

<script src="https://code.jquery.com/jquery-3.1.0.min.js">

目標一樣，

$('#BUTTON_ID').mouseover(function({ 
$('#LIST_ID').show(); 
}));

您的按鈕請記住，讓你的列表中顯示無。 只是興奮知道它是否工作

來源

2016-07-31 08:06:09

不但提問沒有要求一個JS解決方案，但在這裏引入JS或多個ID完全超大。 – TheThirdMan

不，我只是想與HTML和css –

正如@Rahul Arora所指出的，確實是因爲李作爲塊元素。

但是，如果由於某種原因，您仍然希望將其保留爲塊元素，則可以將其保留爲inline-block。我還建議刪除margin（查看你給出的例子，通過檢查元素，它是寫入ul）和padding，這是瀏覽器默認分配的。

下面是代碼：

.header_nav 
 
    { 
 
     width:800px; 
 
     height:400px; 
 
    } 
 
    .header_nav ul 
 
    { 
 
     list-style:none; 
 

 
     //displaying ul & all its child as inline block until overriden by other rules 
 
     display:inline-block; 
 
     
 
    //removing default margin and padding 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    .header_nav ul ul 
 
    { 
 
     display:none; 
 
    } 
 
    .header_nav ul ul #nav_button:hover>ul 
 
    { 
 
    display:block; 
 
    } 
 
    .header_nav ul ul li >ul 
 
    { 
 
     display:none; 
 
    } 
 
    .header_nav ul li:hover >ul 
 
    { 
 
    display:block; 
 
    }

<nav class="header_nav"> 
 
       <ul> 
 
        <li> 
 
        <input type="button" value="Button 1" name="nav_button" id="nav_button"> 
 
         <ul> 
 
          <li>Locations</li> 
 
          <li> 
 
          Mumbai 
 
          <ul> 
 
           <li>Txt 1</li> 
 
           <li>Txt 2s</li> 
 
           <li>Txt 3</li> 
 
          </ul> 
 
          </li> 
 
           
 
          <li>Delhi</li> 
 
          <li>Banglore</li> 
 
          <li>Nagpur</li> 
 
         </ul> 
 
          
 
        </li> 
 
        </ul> 
 
      </nav>

來源

2016-07-31 08:08:18 geeksal

工作感謝清除這兩個選項清楚地給我 –

如何在按鈕懸停上顯示列表？

回答

相關問題