<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xuanting</title>
<style type="text/css">
#a
{
background-image:url(image/index-lhd-1-2880x1480.jpg);
background-size:1000px 500px;
background-position:center;
width:1000px;
height:500px;
border:1px solid #000;
position:relative;
top:100px;
margin:auto;
overflow:hidden;
cursor:pointer;
}
/*#a:hover
{
background-size:1200px 600px;
background-position:center;
transition:0.7S;
cursor:pointer;
}*/
#b
{
width:300px;
height:25px;
position:relative;
top:400px;
margin:auto;
font-family:"微软雅黑";
font-size:18px;
text-align:center;
overflow:hidden;
cursor:pointer;
}
</style>
</head>
<body>
<div id="a" onmouseout="yi()" onmouseover="fu()">
<div id="b" onmouseout="yi()" onmouseover="fu()">
<span>2017雷克萨斯全球设计大奖</span><br />
<span>旨在为新锐设计师们提供机会</span><br /><br />
<span>查看详情 ></span>
</div>
</div>
</body>
</html>
<script>
function yi()
{
document.getElementById("a").style.backgroundSize="1000px 500px";
document.getElementById("a").style.transition="0.7s";
document.getElementById("b").style.transition="0.7s";
document.getElementById("b").style.overflow="hidden";
}
function fu()
{
document.getElementById("a").style.backgroundSize="1200px 600px";
document.getElementById("a").style.backgroundPosition="center";
document.getElementById("a").style.transition="0.7s";
document.getElementById("a").style.cursor="pointer";
document.getElementById("b").style.transition="2s";
document.getElementById("b").style.cursor="pointer";
document.getElementById("b").style.overflow="visible";
}
</script>
时间： 2024-10-14 03:36:39