<!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. JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）

    鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...

  2. 用js写一个鼠标坐标实例

    HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></spa ...

  3. JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  5. QT QCharts QScatterSeries 空心点阵图，鼠标移动到上面显示数值，鼠标移开数值消失

    在最近接到的需求是这样的,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折 ...

  6. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  7. CSS/JS图片鼠标悬浮一道光闪过

    看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光....   啊 ...

  8. WinForm 鼠标进入移开窗体事件，因子控件导致的误触发

    /// <summary> /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 /// </summary> /// <param n ...

  9. [修正] Firemonkey SpeedButton 鼠标移开按钮后 IsPressed 为 False 的问题

    未修正: 修正代码: 请将 FMX.StdCtrls.pas 复制到自己的工程目录下,再修改如下代码: procedure TCustomButton.RestoreButtonState; begi ...

随机推荐

  1. Eclipse+CDT+GDB调试android NDK程序（转）

    Eclipse+CDT+gdb调试android ndk程序 先介绍一下开发环境,在这个环境下,up主保证是没有问题的. ubuntu 11.10 eclipse 3.7(indego) for ja ...

  2. ios二维码扫描

    1.添加AVFoundation.framework框架 2,控制器中实现 //第一步添加AVFoundation.framework框架 #import "ViewController.h ...

  3. 防止ViewPager和Fragment结合使用时候的数据预加载

    不知道你们使用ViewPager和Fragment结合的时候发现一个问题没,如果你的每个Fragment都需要请求网络数据,并且你在请求网络数据的时候会加入进度对话框的加载显示效果,当你显示第一个Fr ...

  4. Uva 129 Krypton Factor

    0.这道题的输出 处理起来挺麻烦的 以后类似的可以借鉴一下 ;i<cur;i++) { && i%==) printf("\n%c",a[i]); & ...

  5. POJ 3450 后缀数组/KMP

    题目链接:http://poj.org/problem?id=3450 题意:给定n个字符串,求n个字符串的最长公共子串,无解输出IDENTITY LOST,否则最长的公共子串.有多组解时输出字典序最 ...

  6. 《DSP using MATLAB》示例Example5.2

    代码: L = 5; N = 20; k = [-N/2:N/2]; % square wave parameters xn = [ones(1,L), zeros(1,N-L)]; % Sq wav ...

  7. BestCoder Round #68 (div.2)

    并查集 1002 tree 题意:中文题面 分析:(官方题解)把每条边权是1的边断开,发现每个点离他最近的点个数就是他所在的连通块大小. 开一个并查集,每次读到边权是0的边就合并.最后Ansi=siz ...

  8. ie不支持getElementsByClassName的解决办法

    目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果不支持,就在document对象里加入getElementsByClassName这个方法,按兴趣的朋友可以了解下 if (navig ...

  9. 修改WordPress中上传附件2M大小限制的方法/php+iis上传附件默认大小修改方法

    在服务器上架设好WordPress后,使用过程中发现,上传附件大小有2M的限制 话说服务器就是本机,可以直接把文件拖到附件存储文件夹下,然后在需要附件的地方引用链接 可是这种落后的方法终究不是办法,还 ...

  10. ural 2067. Friends and Berries

    2067. Friends and Berries Time limit: 2.0 secondMemory limit: 64 MB There is a group of n children. ...