Question

so I have a CSS fade animation on hover.

Check out the 6 rectangle buttons on the homepage here: http://athenasweb.com

When you hover over one of the li’s in the ul. The blue area where the title of the box is animates. However in IE it just switches completely to white without the animation.

So I tried to use jQuery (I’m a jQuery noob) to fix that only in IE

<!--[if IE 9]>
        <script>
            $("ul#home_blocks li").hover(function(){$(this).next('span');.fadeOut(150);$(this).next('span');.fadeIn(300);});
        </script>
<![endif]-->

However to no effect

This code below works! However it only works if you hover over the span instead of the whole li, if I remove the span then the entire block animates which is not what I’m trying to do.

<!--[if IE 9]>
        <script>
            $("ul#home_blocks li span").hover(function(){$(this).fadeOut(150);$(this).fadeIn(300);});
        </script>
<![endif]-->

Any tips this afternoon, stackers? 🙂

Here is the HTML & CSS:

<ul id="home_blocks">

        <li> 
            <a href="http://athenasweb.com/category/aspects/" title="Check out Weekly Aspects"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_aspects.jpg" alt="Weekly Aspects"/> 
            <span class="block_title">Weekly Aspects</span></a>
        </li>

        <li>
            <a href="http://athenasweb.com/category/daily-planets/" title="Check out Daily Planets"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_planets.jpg" alt="Daily Planets"/>
            <span class="block_title">Daily Planets</span></a>
        </li>

        <li>
            <a href="http://athenasweb.com/category/column/" title="Read the Column"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_column.jpg" alt="Column"/>
            <span class="block_title">Column</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/astro101.html" title="Learn some Astrology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_astrology.jpg" alt="Astrology 101"/>
            <span class="block_title">Astrology 101</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/athena.html" title="Learn about Athena"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_athena.jpg" alt="Athena"/>
            <span class="block_title">Athena</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/hitsIII.html" title="Learn some Mythology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_mythology.jpg" alt="World Mythology"/>
            <span class="block_title">World Mythology</span></a>
        </li>
     </ul>         

CSS:

#home_blocks            { position: relative; margin-top: 20px; list-style: none; }
    #home_blocks li         { position: relative; display: block; float: left; margin: 0 15px 20px 0; width: 310px; height: 401px; border-bottom: 1px solid #4098db; text-align: center; font-family: 'Raleway', sans-serif; font-size: 25px; font-weight: 900; background: #4098db; 
    /*opacity: 1.0; 
    filter:alpha(opacity=100); */
    -webkit-transition: background .2s; -moz-transition: background .2s; -ms-transition: background .2s; transition: background .2s; }
    #home_blocks a          { color: white;  text-shadow: 0 1px 0 #666; }
    #home_blocks li:nth-child(3n) { margin: 0 0 20px 0; }
    #home_blocks li a       { -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; transition: color 1s; }
    #home_blocks a:hover    { color: #4098db; text-shadow: 0 1px 0 #ccc; cursor: pointer; }
    #home_blocks li:hover   { 
        background: white; border-bottom: 1px dotted #4098db; 
        /*opacity:0.95; filter:alpha(opacity=95); */
    }
    .block_title            { display: block; position: absolute; bottom: 0px; left: 0; padding:25px 0 20px 0; width: 310px; z-index: 999; }
    .blocks                 { z-index: 1; }

Answer 1

This is because CSS3 transition doesn’t work in IE9. If you want to implement your way, you need to handle disabling css hover on IE as well, which is not a good idea I think.

I would suggest to use cross-browser transition library such as css3transitions-jquery.

http://addyosmani.com/blog/css3transitions-jquery/