<!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. hdu 4770(枚举 + dfs爆搜）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4770 思路:由于最多只有15个".",可以直接枚举放置的位置,然后判断是否能够全部 ...

  2. SQL数据库的基本语句

    1.修改字段类型语句: alter table 表名 alter column 列名  类型 例如: alter table D  alter column no char(15): 2.从其他地方插 ...

  3. Netty 入门示例

    服务端代码示例 import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.*; import io.netty.channe ...

  4. hdu1520 Anniversary party (树形dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1520题意:上司和直系下属不能同时参加party,求party的最大活跃值.输入: 输入n个 ...

  5. express－14 发送邮件

    简介 Node和Express都没有内置的邮件发送功能,所以必须使用第三方模块.推荐Andris Reinman的Nodemailer SMTP.MSA和MTA 发送邮件的通用语言是简单邮件传输协议( ...

  6. css3写箭头

    左箭头 .left-arrow { position: absolute; left: 6%; top: 31%; overflow: hidden; zoom:; width: 0.4rem; he ...

  7. [转载] Spring MVC - 处理器拦截器

    5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器)类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.   ...

  8. ccc 模拟重力 正太分布

    ball.js cc.Class({ extends: cc.Component, properties: { x_vel:{ default:0 }, y_vel:{ default:0 }, gr ...

  9. BZOJ3346 : Ural1811 Dual Sim Phone

    首先将边进行去重,那么有$n\geq\sqrt{m}$. 然后二分答案,转化为判定是否存在两个点它们的出边集合的并集为全集. 那么这两个点必然满足$deg_x+deg_y\geq n$. 不妨设$de ...

  10. 微软曝光眼球追踪新专利，未来或将可以使用眼球控制HoloLens

    想要在增强现实(AR)和虚拟现实(VR)中获得感官能力,计算机的配合非常重要.如何能够更好的追踪我们所感知的,计算机判断用户目光所向的能力就必须进一步提高.根据微软新曝光的专利,可能已经有一个解决方案 ...