为什么 CSS3 过渡属性表现得很有趣？

这里发生了一些奇怪的事情。如果可以的话，请参阅此修补程序页面：http://tinkerbin.com/UZy6H6q4

这是html和css，以防你看不到修补程序。

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

所以，问题是：

-转换在CASE#1上不起作用。
-从li元素中删除"背景色"（就像我在CASE#2中所做的那样）可以让它工作，但以一种奇怪的方式——当你从li元素上收回光标时，在背景色逐渐变回透明之前，它首先变成了黑色。

我已经测试了在li中嵌套"a"标签的常规操作，而不是相反——由于某种原因，我的操作很好。但是，根据规格，我可以将"li"包装在"a"标签中，那么为什么它不起作用呢。我是不是错过了什么？

哦，我正在使用Chrome浏览器——可能与此相关。

将li放入a中是无效的。如果你尝试验证你的html，那么它不会被验证，因为它没有遵循正确的标记。Anchor-tags（）是独立的标签，而li是列表标签，它们是ul或ol的直接子元素。希望这能有所帮助。：）

有关更多信息，请访问w3schools.com。

将a标签放入li

检查此项：http://tinkerbin.com/5kMLVVKk

相关内容

最新更新

热门标签：