gpt4 book ai didi

html - 无法在 li 元素上应用显示属性

转载 作者:太空宇宙 更新时间:2023-11-04 08:55:09 26 4
gpt4 key购买 nike

我是 CSS、HTML 的新手并试图理解列表。但是有些事情让我感到困惑。正如您在我的 HTML 下面看到的,我正在尝试创建一个下拉导航栏。我不明白的是为什么会显示属性不适用于单个 li 元素。

  
 
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
 
<body>
<ul class="block1">
<li class="home"><a href="#">Home</a>

<li class="hidden">
<a href="#">contact us</a>
</li>

<li><a href="#">about</a><li>
<li><a href="#">Investor</a></li>
<li> <a href="#">what we do</a></li>
</li>
</ul>

</body>

最佳答案

这是您应该使用的新 CSS:

.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}

那么你的 html 应该是这样的:

<body>
<ul class="block1">
<li class="home"><a href="#">Home</a></li>

<li class="hidden" >
<a href="#">contact us</a>
</li>

<li><a href="#">about</a></li>
<li><a href="#">Investor</a></li>
<li> <a href="#">what we do</a></li>
</ul>

</body>

您的 html 没什么问题,只是不匹配 <li> , 以及你想要查看这篇文章的 css:Using only CSS, show div on hover over <a>

这是 JSFiddle:Example of OP Code

关于html - 无法在 li 元素上应用显示属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43161856/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com