gpt4 book ai didi

CSS伪类继承

转载 作者:行者123 更新时间:2023-11-28 10:56:59 25 4
gpt4 key购买 nike

我试图理解为什么我的 CSS 在 Opera 中起作用,但在 Firefox 中不起作用。我想要的效果只是一个按钮,当鼠标悬停在该按钮上时,会显示一个下拉菜单。

<html>
<head>

<style>

.dropcontrol {
background-color: red;
}

.dropdown {
display: none;
}

.dropcontrol:hover .dropdown {
display: block;
}

</style>

</head>
<body>

<div class='dropcontrol'>TEST

<div class='dropdown'>

<ul>

<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>

</ul>

</div>

</div>
</body>
</html>

问题似乎是 .dropcontrol:hover .dropdown。关于为什么这适用于 Opera 而不是 Firefox 的任何想法?

感谢您的宝贵时间。

最佳答案

我不确定为什么您的特定设置不起作用,但有更好的方法可以做到这一点。

对于初学者来说,对所有列表执行您正在执行的操作通常是一个更好的主意。所以你会有类似的东西:

<ul class="dropcontrol">
<li>Test
<ul class="dropdown">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
</ul>

如果你必须保留dropcontrol作为一个 div,然后您可以通过删除 dropdown 来清理您拥有的内容div 并给 ul 标签 dropdown类。

此外,根据您尝试执行的具体操作,<select>元素也可能是更好的选择。

关于CSS伪类继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6597291/

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