鼠标移动过去变大变绿

Posted 缘琪梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标移动过去变大变绿相关的知识,希望对你有一定的参考价值。

原始代码

 

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
  </head>
  <body>
  <div id="div1" onmouseover="document.getElementById(‘div1‘).style.height=‘300px‘;
  document.getElementById(‘div1‘).style.width=‘300px‘;
  document.getElementById(‘div1‘).style.background=‘green‘;"
  onmouseout="document.getElementById(‘div1‘).style.height=‘200px‘;
  document.getElementById(‘div1‘).style.width=‘200px‘;
  document.getElementById(‘div1‘).style.background=‘red‘;"></div>
  </body>
</html>

 

函数

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
    <script>
    function toGreen()
    {document.getElementById(div1).style.height=300px;
     document.getElementById(div1).style.width=300px;
     document.getElementById(div1).style.background=green;
    }
    function toRed()
    {
     document.getElementById(div1).style.height=200px;
     document.getElementById(div1).style.width=200px;
     document.getElementById(div1).style.background=red;
    }
    </script>
  </head>
  <body>
  <div id="div1" onmouseover="toGreen()"
  onmouseout="toRed()"></div>
  </body>
</html>

 

变量名称

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
    <script>
    function toGreen()
    {
    var oDiv=document.getElementById(div1);
    oDiv.style.height=300px;
    oDiv.style.width=300px;
    oDiv.style.background=green;
    }
    function toRed()
    {
    var oDiv=document.getElementById(div1);
    oDiv.style.height=200px;
    oDiv.style.width=200px;
    oDiv.style.background=red;
    }
    </script>
  </head>
  <body>
  <div id="div1" onmouseover="toGreen()"
  onmouseout="toRed()"></div>
  </body>
</html>

 

以上是关于鼠标移动过去变大变绿的主要内容,如果未能解决你的问题,请参考以下文章

qt鼠标悬停在按钮变大

淘宝店铺图片,鼠标移动到宝贝图片上去会出现边框,同时图片会变大或缩小,请问这种效果怎么做,谢谢

鼠标悬停和移除的变化(红变绿)

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

黑马day18 鼠标事件&amp;图片变大

VB里怎样让鼠标指针移动到按钮上时弹出提示对话框