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

时间：2016-11-29 22:39:56 阅读：218 评论：0 收藏：0 [点我收藏+]

标签：1.0 ant mouse ansi document visible url 变化 cti

<!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>查看详情&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写当鼠标悬浮及移开出现背景变化

标签：1.0 ant mouse ansi document visible url 变化 cti

原文地址：http://www.cnblogs.com/kuangwong/p/6115209.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行