您的位置：首页 > 其它

最简单的背景颜色、背景图颜色鼠标滑过变换

2017-07-06 11:49 225 查看

这个页面首先需要引进js

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>

html5背景

</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>

<style type="text/css">

.bg1 {

margin: 0px;
padding-top: 70px;
height: 420px;
width: 100%;
padding-bottom: 0px;

}

.sju {
height: 295px;
width: 1180px;
margin-top: 70px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}

.tit1 {
height: 64px;
width: 104px;
margin:0 auto;

}

.item1,.item2,.item3,.item4 {
padding: 0px;
float: left;
height: 295px;
width: 270px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
text-align:center;
box-shadow:5px 5px 5px #666;

}

.sj_con {
font-size: 20px;
line-height: 60px;
color: #272425;
background:#ebeaea;
text-align: center;
padding: 0px;
height: 189px;
width: 270px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

}

.sj_con1 {
font-size: 20px;
line-height: 60px;
color: #272425;
background:#2fa8e6;
text-align: center;
padding: 0px;
height: 189px;
width: 270px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

}

.bg1 .sju .item a :hover {

}

.s {
font-size: 22px;
color: #2fa8e6;
display: block;
margin-top: 15px;

}
.sj_con img {
padding: 0px;
height: 73px;
width: 109px;
margin-top: 25px;

}
</style>

</head>

<body>

<div class="bg1">

<div class="tit1"><img src="images/tit1.png" /></div>

<div class="sju">

<div class="item1">

<p class="sj_con">
<img src="w1.png" width="109" height="73px; " > <br>
物流

</p>
<span class="s">1.2亿+</span>
</div>

<div class="item2">

<p class="sj_con">
<img src="d1.png" width="109" height="73px; " > <br>
电商
</p>
<span class="s">200万+</span>

</div>
<div class="item3">

<p class="sj_con">
<img src="j1.png" width="109" height="73px; " > <br>
交通</p>
<span class="s">300万+</span>

</div>

<div class="item4" style="margin-right:0px;">

<p class="sj_con">
<img src="g1.png" width="109" height="73px; " > <br>
公共</p>
<span class="s">200万+</span>

</div>

</div>

</div>

<script>

$(document).ready(function () {

//按钮样式切换

$(".item1").mouseover(function(){
$(this).find('img').attr('src','w2.png');
$(this).children('.sj_con').css('background','#2fa8e6');

});

$(".item1").mouseout(function(){
$(this).find('img').attr('src','w1.png');
$(this).children('.sj_con').css('background','#ebeaea');

});

$(".item2").mouseover(function(){
$(this).find('img').attr('src','d2.png');
$(this).children('.sj_con').css('background','#2fa8e6');

});

$(".item2").mouseout(function(){
$(this).find('img').attr('src'
96dc
,'d1.png');
$(this).children('.sj_con').css('background','#ebeaea');

});

$(".item3").mouseover(function(){
$(this).find('img').attr('src','j2.png');
$(this).children('.sj_con').css('background','#2fa8e6');

});

$(".item3").mouseout(function(){
$(this).find('img').attr('src','j1.png');
$(this).children('.sj_con').css('background','#ebeaea');

});

$(".item4").mouseover(function(){
$(this).find('img').attr('src','g2.png');
$(this).children('.sj_con').css('background','#2fa8e6');

});

$(".item4").mouseout(function(){
$(this).find('img').attr('src','g1.png');
$(this).children('.sj_con').css('background','#ebeaea');

});

/*$(".sj_con").hover(

function () {

$(this).removeClass("btFeed").addClass("btFeedhover");

},

function () {

$(this).removeClass("btFeedhover").addClass("btFeed");

}

); */

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标滑过北京变换

相关文章推荐

新的分享

章节导航