如何在按钮悬停上显示列表？

问题描述：

我想显示按钮悬停列表，但会发生什么，只要我悬停在按钮区域附近，文本显示。如何在按钮悬停上显示列表？

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

答

这是因为你的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/

感谢您的帮助@rahul阿罗拉 –

答

原因是您的li元素是一个块元素，这意味着它会自动尝试跨越整个可用宽度。在你的情况下，这是最顶层元素提供的800像素。

你有两种解决方案可供使用 - 一种是使列表元素成为内联块元素（或简单地说是内联元素，尽管我更喜欢内联块，因为块是它的开始方式）来防止它企业跨越式的整个宽度：

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

您也可以悬停在按钮时，直接，没有盘旋在它时触发无序列表上的显示变化的父列表项：

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

这是有可能的更好的解决方案，因为它不会弄乱显示器类型比你需要的更多，并且你更准确地描述你想要发生的事情 - 当按钮悬停时显示列表。

感谢信息这让我理解这个概念太大明确@TheThirdMan –

答

如果我正确地得到你的问题，那么你想要显示一个列表，只要你在一个按钮上。你应该使用jQuery来做到这一点。像首先包括了jQuery文件从该网址

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

目标一样，

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

您的按钮请记住，让你的列表中显示无。 只是兴奋知道它是否工作

不但提问没有要求一个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>

工作感谢清除这两个选项清楚地给我 –

如何在按钮悬停上显示列表？

相关推荐