<!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. matlab练习程序（Sepia Tone滤镜）

    我手机上有一个软件实现了很多图像滤镜,挺有意思,我打算都尝试一下. 这个滤镜主要是实现老照片效果. 代码很短,我就不详细介绍了. 原图: 处理后效果: matlab代码如下: clear all;cl ...

  2. 两个本地(localhost)html文件之间的传值

    什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架).可以理解为把iframe解释成“浏览器中的浏览器“ 在IE中: document.frames[i].docum ...

  3. Linux(centos)如何安装Zend Optimizer Zend Guard Loader

    很多php开源系统都是基于Zend Optimizer的,所以我们需要先安装Zend Optimizer.但在php5.3之后Zend Optimizer被Zend Guard Loader 取代了, ...

  4. 【criteria CascadeType】级联的不同情况

    使用criteria进行增删改查操作,可能会发生级联删除的情况,例如对员工表进行删除,可能会级联删除掉部门表中的某一条信息[类似这样的情况] 对此,我们可以在实体类中对级联的关系进行管理: 对于cri ...

  5. poj 2063 Investmen 完全背包

    这个题的想法不难,两个点: 1 是完全背包 2 是考虑/1000,降低复杂度   但是提交的时候反复的wa,最后找问题原来是dp开小了,可是dp本来开1005,后来开到100030过了.哎,如果没有时 ...

  6. poj1745 dp

    题目链接:http://poj.org/problem?id=1745 类似的题目之前写过一个差不多的(链接:http://www.cnblogs.com/a-clown/p/5982611.html ...

  7. 分享Kali Linux 2016.2第47周镜像

    分享Kali Linux 2016.2第47周镜像Kali Linux官方于11月20日发布Kali Linux 2016.2的第47周镜像.这次发布仍然包含11个镜像文件.其中,不仅包含Gnome桌 ...

  8. Android和SQLite版本对应关系

    Android和SQLite版本对应关系 今天Xamarin群有人问到Android和SQLite版本如何对应,顺手查了一下,贴出来. SQLite 3.8.4.3: • 21-5.0-Lollipo ...

  9. ps让文字的颜色变成图片的颜色

    第一种: 把某张图片图层置于文字图层之上,右击图片图层-->选择"创建剪贴蒙版"即可.第二种:把某张图片图层置于文字图层之上,并选择图片图层,按住Ctrl键,点击文字图层,载 ...

  10. jqgrid动态显示/隐藏某一列

    jQuery("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid&qu ...