将鼠标悬停在jQuery中的li元素上时如何定位跨度

Question

所以我有一个悬停时的 CSS 淡入淡出动画。

在此处查看主页上的 6 个矩形按钮：http://athenasweb.com

当您将鼠标悬停在 ul 中的一个 li 上时。框标题为动画的蓝色区域。但是在 IE 中它只是完全切换到白色而没有动画。

所以我尝试使用 jQuery（我是 jQuery 菜鸟）仅在 IE 中修复该问题

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

但是没有效果

下面的代码有效！但是，它仅在您将鼠标悬停在跨度而不是整个 li 上时才有效，如果我删除跨度，则整个块都会动画，这不是我想要做的。

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

今天下午有什么建议吗，堆垛机？ :)

这是 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

Jquery 事件处理程序中的

'this' 关键字将始终包含悬停的项目，即整个

元素。因此，在您的 jQuery 中，删除选择器中的跨度。然后，在“动画”调用中，执行 $(this).filter("span").fadeOut(150) 以仅对跨度进行动画处理。

Answer 2

这是因为 CSS3 过渡在 IE9 中不起作用。如果你想实现你的方式，你还需要在 IE 上处理禁用 css hover，我认为这不是一个好主意。

我建议使用跨浏览器转换库，例如 css3transitions-jquery。

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