3
ここで奇妙なことが起こっています。 http://tinkerbin.com/UZy6H6q4CSS3の遷移プロパティが面白いのはなぜですか？
tinkerbinが表示されない場合は、ここに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>
ので、問題：
は-the移行はCASE＃1上では動作しません。
li要素から "background-color"を削除すると（ケース＃2のように）動作しますが、li要素の上からカーソルを戻すと、背景色が消えてしまう透明に戻ると、最初は黒くなります。
私はいつも "a"タグがliの中にネストされていることをテストしました。しかし、仕様によれば、 "li"を "a"タグで囲むことができるので、それがなぜ機能しないのでしょうか？何か不足していますか？
ああ、私はChromeを使用しています。おそらく関連性があります。無効である内部のリチウムを入れ http://tinkerbin.com/5kMLVVKk
ul（とその点についてはol）は、li以外の要素を子要素として持つことはできません - liをラップするタグを無効にすることはできますか？レンダリングを台無しにするかもしれないかもしれませんか？ – banzomaikaka