CODEWITHSUNDEEP
htmlcsscss-transitions
Paulo R.
Paulo R.

Reputation: 15609

Why's the CSS3 transition property acting funny?

Weird stuff happening here. See this tinkerbin page, if you may: http://tinkerbin.com/UZy6H6q4

Here's the html and css in case you can't see the 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>

So , the problem:

-the transition doesn't work on CASE #1.
-removing the "background-color" from the li element (as I did on CASE #2) makes it work, but in a weird way - when you take back the cursor from over the li element, before the background color fades back to transparent, it first becomes black.

I've tested doing the usual of having the "a" tag nested inside the li, and not the other way around - works fine, as I, for some reason expected. But since, according to the specs, I can have the "li" wrapped in an "a" tag, then why does it not work. Am I missing something?

Oh, and I'm using Chrome - possibly relevant.

Upvotes: 3

Views: 205

Answers (2)

Abhidev
Abhidev

Reputation: 7253

putting li inside a is invalid. If you try validating your html then it won't be validated as it doesn't follow the right markup. Anchor tags() are stand-alone tags whereas li's are list tags and they are immediate child elements of ul or ol. Hope this helps. :)

Refer w3schools.com for more info.

Upvotes: 2

sandeep
sandeep

Reputation: 92803

Put a tag inside li

check this: http://tinkerbin.com/5kMLVVKk

Upvotes: 1

Related Questions