jq鼠标经过隐藏当前显示另一个

来源:互联网 发布:星游记网络大电影 编辑:程序博客网 时间:2024/05/21 09:29
$.ajax({
url: "http://47.92.54.124:8080/platform/partner/partnerApi",
type: "post",
dataType: "jsonp",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
async: false,
cache: false,
success: function(dataa) {
var partnershtml = "";
var partenrshurl = "";
var partnersdata = dataa.data;
for(var j = 0; j < partnersdata.length; j++) {
var objsa = partnersdata[j];
partenrshurl = objsa.URL;
if(objsa.URL == null) {
partenrshurl = "#";
}
partnershtml += '<li style="cursor: pointer;"> <a><span class="v1"><img src="' +
objsa.logo + '" width="226" height="154" /><span class="div"><p class="txt1">' +
objsa.name + '</p></span></span></a></li>';
}
$('.sis-li').html(partnershtml);


// $("span.div").hide();


$(".sis-li li").hover(function() {
$("span.div", this).fadeIn(300);
$(this).siblings().find("span.div").hide();
}, function() {
$("span.div", this).fadeOut(100);
});


},
error: function(dataa) {
console.log('links:' + data);
}

});


css:

#partner{width:100%; height: auto;padding-bottom: 100px; overflow: hidden;/*padding-top: 90px;*/background: white;}
#partner #center{width:1201px; height: 100%; margin: 0px auto;}
#partner  p.big_title{font-size: 28px; color: #333333;text-align: center;padding-top: 4px;padding-bottom: 10px;/*margin-left: -100px;*/ /*background:  url("../images/title_center.png") no-repeat center 48px;*/background-size: 9% 2%;margin-top: 40px;}
#partner #center li{width: 200px;height: 149px;/*border: 1px solid;*/border-bottom: 1px solid #EDEDED;
border-left: 1px solid #EDEDED;}
#partner #center ul.sis-li span.hid_div{width: 186px;
                                        position: absolute;
                                        z-index: 10;
                                        background: #F00;
                                        FILTER: alpha(opacity=60);
                                        opacity: 0.7;
                                        -moz-opacity: 0.7;
                                        left: 10px;
                                        bottom: 15px;
                                        height: 110px;
                                        float: left;
                                        text-align: left;
                                        padding: 15px 12px 0 12px;}
ul.sis-li{ margin:0 auto; width:100%; overflow:hidden;margin-top: 25px;border-top: 1px solid #EDEDED;
border-right: 1px solid #EDEDED;}
ul.sis-li li{ float:left; padding-top:11px; width:228px; overflow:hidden; padding-right:22px}
ul.sis-li li .v1{float:left;width:200px; position:relative; height:149px; color:#7F7F7F;top: -10px;}
/*ul.sis-li li .v2{ padding-top:6px; width:100%; float:left; overflow:hidden}*/
ul.sis-li li .v1 img{ width:200px; position:absolute; left:0; top:0; z-index:5; height:148px}
ul.sis-li li .v1 .div{display: none; width:200px; position:absolute; z-index:10; background:#FF931A;/*border: 1px solid #e3b037; */FILTER:alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; left:0px;bottom:0px; height:160px; float:left; text-align:center; padding:70px 12px 0 12px}
ul.sis-li li .v1 .div h3{ line-height:20px; padding-bottom:10px; display:block;color:#FFF; overflow:hidden}
ul.sis-li li .v1 .div .txt{ line-height:18px; height:80px; display:block;color:#FFF; overflow:hidden;font-size: 20px;}
ul.sis-li li .v1 .div .txt1{color:#fff; font-size: 20px;margin-bottom: 7px;}



样式参考“01cto。com”

原创粉丝点击