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

来源：互联网发布：eclipse写php 编辑：程序博客网时间：2024/05/17 08:39

这个页面首先需要引进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','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>

阅读全文

0 0