Html
    Css
    Js

    
                        
.live {
	width:100%;
	/*height:390px;
	*/
	margin-bottom:32px;
}
.live h1 {
	text-align:left;
	margin-bottom:40px;
	font-size:2rem;
	/* margin-left:2%;
	*/
}
.livecon {
	margin:2px 0 2px 20px;
	background-color:#eee;
}
.liveleft {
	float:left;
	width:60%;
	height:330px;
}
.liveleft img {
	width:100%;
	height:100%;
}
.liveleft h5 {
	font-size:18px;
	color:#333;
	margin-bottom:2px;
}
.liveleft p {
	width:100%;
	color:#666;
	height:20px;
	margin:0;
}
.liveright {
	float:right;
	width:40%;
}
.liveright ul {
	}.liveright ul li {
	list-style:none;
	float:left;
	width:48%;
	height:190px;
	margin-bottom:2px;
}
.space {
	margin-left:2%;
}
.liveright ul li img {
	width:100%;
	height:100%;
}
.textcon {
	margin:2px 0 2px 20px;
	overflow:hidden;
}
.tab {
	display:none;
}
.show {
	display:block;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

鼠标悬停图片的变换

无需准备多套图像

简单易懂

跨浏览器(在IE/ FF/ Safari浏览器/chrome)

0