CODEWITHSUNDEEP
htmlcssgoogle-chrome
Muteking
Muteking

Reputation: 1513

li elements not responding to fadein css in chrome

In Firefox it works as intended but in Chrome li text is not fading in. I've tried grouping everything with a,li but it outputs a all li elements with 0.5 opacity, while a elements remain correct.

html

<h2> Foo  <a href = "http://www.google.com" target = "_blank">Link</a>  </h2>
<h2> Foo2 <a href = "http://www.stackoverflow.com" target = "_blank">Link</a> </h2>
<hr>

<h2>Index</h2>

<ol>
<a href = "#images"><li>photo</li></a>
<a href = "#video"><li>Video</li></a>
<a href = "#videogame"><li>Videogame</li></a>
</ol>

and the css

li
{
list-style-type:none;
}


a
{
clear:both;
color: #0db9d2;
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
transition:opacity .25s ease-in-out;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
}

a:visited{
color: #28548d;
}

a:hover{
opacity:0.5;
-webkit-opacity:0.5;
-moz-opacity:0.5;
}

Upvotes: 0

Views: 44

Answers (2)

karthickj25
karthickj25

Reputation: 1197

you need to have the <li> as list inside <ol>

<h2> Foo  <a href = "http://www.google.com" target = "_blank">Link</a>  </h2>       
<h2> Foo2 <a href = "http://www.stackoverflow.com" target = "_blank">Link</a> </h2>    
<hr>    
<h2>Index</h2>

<ol>
    <li><a href="#images">photo</a>
    </li>
    <li><a href="#video">Video</a>
    </li>
    <li><a href="#videogame">Videogame</a>
    </li>
</ol>

Fiddle link

Upvotes: 1

erlingormar
erlingormar

Reputation: 461

The reason why the LI-text isn't fading in, is that your CSS selector targets Aelements in particular. This is why only the text in A-elements will fade (the text node in the LI element sits outside the A)..

Wrapping the LI-element inside A is illegal HTML syntax as pointed out by zvona, but we can fix that by moving the A inside the LI.

<li><a href="#images">photo</a></li>

Here's a fiddle with your code and the syntax changed: http://jsfiddle.net/erlingormar/hshjydLg/

Is this effect what you were looking for?

Upvotes: 1

Related Questions