<!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>