Почему свойство перехода CSS3 ведет себя забавно? - PullRequest
Новая
       5

Почему свойство перехода CSS3 ведет себя забавно?

3 голосов
/ 23 февраля 2012

Странные вещи здесь происходят. Посмотрите эту страницу tinkerbin, если вы можете: 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>

Итак, проблема:

- переход не работает на СЛУЧАЕ № 1.
-удаление "background-color" из элемента li (как я это делал на CASE # 2) заставляет его работать, но странным образом - когда вы возвращаете курсор над элементом li, до того, как цвет фона исчезнет до прозрачный, сначала он становится черным.

Я тестировал, как обычно, когда тег "a" вложен в li, а не наоборот - работает нормально, как я, по некоторым причинам, ожидал. Но так как, согласно спецификациям, я могу заключить "li" в тег "a", то почему он не работает. Я что-то упустил?

О, и я использую Chrome - возможно, уместен.

Ответы [ 2 ]

2 голосов
/ 23 февраля 2012

недопустимо помещать li в a. Если вы попытаетесь проверить ваш HTML, он не будет проверен, так как он не соответствует правильной разметке. Якорные теги () являются автономными тегами, тогда как li являются списочными тегами, и они являются непосредственными дочерними элементами ul или ol. Надеюсь это поможет. :)

Для получения дополнительной информации см. W3schools.com.

1 голос
/ 23 февраля 2012

Поместите a тег внутрь li

отметьте это: http://tinkerbin.com/5kMLVVKk

...