1

嗨，我正在尝试实现悬停覆盖效果，使用基本的 div ul li a img 列出对象元素，当悬停在特定图像上时，我只想要一个带有一些白色文本标题的黑色覆盖层。

到目前为止，我已经让 JQuery 和 CSS 标题滑块功能在现代浏览器甚至 IE8 以及以前的版本中正常运行，但我似乎无法让标题集成以在 IE9 中正常运行。文本标题覆盖部分显示（如预期的那样），但不会在悬停事件上向上滑动。

下面是一个 JSFiddle 示例，说明它如何在现代浏览器中正常工作：

http://jsfiddle.net/RossB/THS2J/

任何人都可以阐明我缺少的任何技巧吗？

这是我的 HTML 代码的一部分：

<ul>
<div class="featurebox holder">
     <li><img src="images/web_page/pink.jpg" alt="events" /></li>
     <div class="cover featuretext">
        <h3 class="date">Day 24th Month</h3>
        <p>Lorem ipsum dolor sit amet,
        consectetur asipisicing elit, sed do
        eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p>
      </div>
</div>
</ul>

这是我正在应用的 CSS：

.featurebox h3{ 
        color:#ffffff;
        margin-top:0px; 
        margin-bottom:0px; 
        padding-left:5px; 
        font:11pt;  
        font-weight: bold;  
    }

.featurebox{ 
        color:#ffffff;
        width: 185px; 
        height: 118px;  
        float:left; 
        /*border: solid 2px #8399AF;*/ 
        overflow: hidden;
        position: relative; 
    }


/*caption para text*/               
.featurebox p{ 
        margin-top:0px;
        padding-left: 5px; 
        padding-right:5px; 
    }

/*caption slider */             
.featuretext{ 
        top:99px;
        float: left; 
        position: absolute; 
        background: #000; 
        height: 100px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }



.holder .featuretext {
        top: 220;
        left: 0;
    }

.featurebox p a  {
        float: right;
        color:#FFFF00;
    }

最后是 JQuery：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">

$(document).ready(function(){   
//Caption Sliding (Partially Hidden to Visible)
    $('.featurebox.holder').hover(function(){
    $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
    });
});
</script>

任何帮助将非常感激。谢谢

4

0 回答 0