1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>xuanting</title>
  6. <style type="text/css">
  7. #a
  8. {
  9.     background-image:url(image/index-lhd-1-2880x1480.jpg);
  10.     background-size:1000px 500px;
  11.     background-position:center;
  12.  
  13.     width:1000px;
  14.     height:500px;
  15.     border:1px solid #000;
  16.     position:relative;
  17.     top:100px;
  18.     margin:auto;
  19.     overflow:hidden;
  20.     cursor:pointer;
  21. }
  22. /*#a:hover
  23. {
  24.  
  25.     background-size:1200px 600px;
  26.     background-position:center;
  27.     transition:0.7S;
  28.     cursor:pointer;
  29. }*/
  30. #b
  31. {
  32.     width:300px;
  33.     height:25px;
  34.     position:relative;
  35.     top:400px;
  36.     margin:auto;
  37.     font-family:"微软雅黑";
  38.     font-size:18px;
  39.     text-align:center;
  40.     overflow:hidden;
  41.     cursor:pointer;
  42.         }
  43.  
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <div id="a" onmouseout="yi()" onmouseover="fu()">
  49. <div id="b" onmouseout="yi()" onmouseover="fu()">
  50. <span>2017雷克萨斯全球设计大奖</span><br />
  51. <span>旨在为新锐设计师们提供机会</span><br /><br />
  52.  
  53. <span>查看详情&nbsp;&nbsp;&nbsp;></span>
  54. </div>
  55. </div>
  56. </body>
  57. </html>
  58. <script>
  59. function yi()
  60. {
  61.     document.getElementById("a").style.backgroundSize="1000px 500px";
  62.     document.getElementById("a").style.transition="0.7s";
  63.     document.getElementById("b").style.transition="0.7s";
  64.     document.getElementById("b").style.overflow="hidden";
  65. }
  66. function fu()
  67. {
  68.     document.getElementById("a").style.backgroundSize="1200px 600px";
  69.     document.getElementById("a").style.backgroundPosition="center";
  70.     document.getElementById("a").style.transition="0.7s";
  71.     document.getElementById("a").style.cursor="pointer";
  72.     document.getElementById("b").style.transition="2s";
  73.     document.getElementById("b").style.cursor="pointer";
  74.     document.getElementById("b").style.overflow="visible";
  75. }
  76. </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. flex模拟微信布局

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

  2. yaml官方介绍

    官方网站 http://yaml.org/ 数据结构类型说明 http://yaml.org/type/ YAML Specification http://yaml.org/spec/

  3. DampView阻尼效果

    阻尼效果即是图片向下拉动时会放大,松开会回弹 1.自定义一个DampView类,继承ScrollView 2.布局最外层必须是DampView,且DampView和要拉动的图片之间只能有一层layou ...

  4. 搭建ASP JSP运行环境

    搭建JSP 服务器 Java + HTML 的运行环境 服务端搭建ASP.NET运行环境

  5. python 类型判断-- isinstance函数

    判断类型 函数isinstance()可以判断一个变量的类型,既可以用在Python内置的数据类型如str.list.dict,也可以用在我们自定义的类,它们本质上都是数据类型. 假设有如下的 Per ...

  6. 安装Maven、Eclipse设置、添加地址JAR

    1.下载Maven 地址:http://maven.apache.org/download.cgi 2.安装Maven 系统变量:MAVEN_HOME = D:\maven\apache-maven- ...

  7. C#经典机试题(猫叫)

    猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒.(C#语言) 1.要有联动性,老鼠和主人的行为是被动的. 2.考虑可扩展性,猫的叫声可能引起其他联动效应. public interface Observ ...

  8. 浩瀚技术 安卓版移动开单手持微POS PDA无线移动开单软件 -安卓版移动手持开单设备

    PDA数据采集器,是深圳浩瀚技术有限公司最新研发的一款安卓版移动手持开单设备,它通过WIFI和GPRS连接并访问电脑,从进销存软件中读取数据,实现移动开单,打破电脑开单模式. 它自带扫描器,可直接扫描 ...

  9. Java基础语法的学习

    首先就是关于枚举类型的思考与实践,这个是在jdk5.0及以后的版本才有的,然后对枚举类型进行动手操作. 源代码: package test; public class EnumTest { publi ...

  10. js总结-面向对象编程，DOM,BOM