gpt4 book ai didi

html - 为什么 CSS3 过渡属性表现得很有趣?

转载 作者:可可西里 更新时间:2023-11-01 13:15:59 26 4
gpt4 key购买 nike

这里发生了奇怪的事情。如果可以,请参阅此 tinkerbin 页面:http://tinkerbin.com/UZy6H6q4

这是 html 和 css,以防您看不到 tinkerbin。

<head>
<style>

ul{
overflow: hidden;
padding:0;
margin:0;
list-style-type:none;
background-color: pink;
}

ul a{
text-decoration: none;
color: white;
}

li{
float: left;
height: 30px;
line-height: 30px;
width: 90px;
margin-right: 5px;
background-color:red;
text-align:center;
-webkit-transition: all .6s linear;
}

#case2 li{
background: none;
}

#case2 li:hover, li:hover{
background-color: lightblue;
}
</style>
</head>

<body>

<!-- CASE #1 -->

<ul id="case1">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>

<!-- CASE #2 -->

<ul id="case2">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</body>

所以,问题:

-转换不适用于案例#1。
- 从 li 元素中删除“背景颜色”(就像我在案例 #2 中所做的那样)使其工作,但以一种奇怪的方式 - 当您从 li 元素上收回光标时,在背景颜色变回之前透明,先变黑。

我测试过将“a”标签嵌套在 li 中的常规做法,而不是相反 - 工作正常,正如我所料,出于某种原因。但是,根据规范,我可以将“li”包裹在“a”标签中,那为什么它不起作用。我错过了什么吗?

哦,我正在使用 Chrome - 可能相关。

最佳答案

将 li 放在 a 中是无效的。如果您尝试验证您的 html,那么它不会被验证,因为它没有遵循正确的标记。Anchor tags() 是独立的标签,而 li 是列表标签,它们是 ul 或 ol 的直接子元素。希望这可以帮助。 :)

有关详细信息,请参阅 w3schools.com。

关于html - 为什么 CSS3 过渡属性表现得很有趣?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9406980/

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