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

最新推荐文章于 2023-01-31 20:28:05 发布

转载最新推荐文章于 2023-01-31 20:28:05 发布 · 1.3k 阅读

文章标签：

#web #ajax #jq #前端

ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Ajax从服务器获取合作伙伴数据的方法，并展示了如何利用这些数据动态生成网页上的列表项。通过具体的JavaScript代码示例，文章详细解释了数据加载过程、列表项的构建以及鼠标悬停效果的实现。

$.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><img src="' +
objsa.logo + '" width="226" height="154" />' +
objsa.name + '</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;}