Question

这里发生了奇怪的事情。如果您可以：http://tinkerbin.com/UZy6H6q4

，请参阅此tinkerbin页面

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

所以，问题是：

- 转换不适用于CASE＃1 - 从li元素中删除“background-color”（正如我在CASE＃2上所做的那样）使它工作，但是以一种奇怪的方式 - 当你从li元素上取回光标时，在背景颜色逐渐消失之前透明，它首先变黑。

我已经测试过通常将“a”标签嵌套在li中，而不是相反 - 工作正常，因为我出于某种原因预期。但是，根据规格，我可以将“li”包裹在“a”标签中，那为什么它不起作用。我错过了什么吗？

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

Answer 1

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

请访问w3schools.com了解更多信息。

Answer 2

将a标记放在li

中

检查一下： http://tinkerbin.com/5kMLVVKk

为什么CSS3过渡属性表现得好笑？

2 个答案: