首页 > 代码库 > js写当鼠标悬浮及移开出现背景变化

js写当鼠标悬浮及移开出现背景变化

2024-08-24 02:33:24   219人阅读

<!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" onm ouseout="yi()" onm ouseover="fu()">
<div id="b" onm ouseout="yi()" onm ouseover="fu()">
<span>2017雷克萨斯全球设计大奖</span><br />
<span>旨在为新锐设计师们提供机会</span><br /><br />

<span>查看详情&nbsp;&nbsp;&nbsp;></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>

 

js写当鼠标悬浮及移开出现背景变化


联系
我们