Question

您好我正在尝试实现悬停叠加效果，使用基本的div ul im img列出对象元素，当我将鼠标悬停在特定图像上时，我只想要一个带有一些白色文字标题的黑色叠加层。

到目前为止，我已经获得了JQuery和CSS标题滑块功能，可以在现代浏览器甚至IE8以及之前的版本中正常运行，但我似乎无法将IE标题集成为正常运行。文本标题叠加部分显示（按预期），但不会在悬停事件上向上滑动。

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

任何人都能详细说明我错过的任何技巧吗？

以下是我的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>

非常感谢任何帮助。感谢

IE9中的jquery和css标题滑块无法正常工作

0 个答案: