js实现鼠标悬浮将当前内容写入其他元素代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js实现鼠标悬浮将当前内容写入其他元素代码实例

在很多实际应用中，当鼠标滑过某些元素的时候，能够将相关元素的信息写入某一个地方，例如一些日历就有此功能，当鼠标滑过日期的时候，能够将相关的日期信息写入指定的位置，下面就通过实例简单介绍一下如何实现此效果。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
#backcolor {
  width:400px;
  height:400px;
  background:#FFFF00;
  text-align:center;
  border:ridge 30pt red;
  margin:auto;
}
td {
  border:ridge 3pt red;
  width:100px;
  height:100px;
}
div {
  width:auto;
  height:100px;
  text-align:center;
  line-height:100px;
}
</style>
<script type="text/javascript">
window.onload=function() {
  var divArry=document.getElementsByName('divname');
  var divto=document.getElementById('div12');
  var arry=['春节','情人节','不知道有什么节日！','清明节','劳动节','儿童节','好像这个月没有什么重大的节日吧！','建军节','教师节','国庆节','光棍节','圣诞节'];
  for(var i=0;i<divArry.length;i++) {
    divArry[i].index = i;
    divArry[i].onmouseover=function() {
      for(var i=0;i<divArry.length;i++) 
      {
        divArry[i].style.background='';
      }
      this.style.background='red';
      divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
    }
  }
};
</script>
</head>
<body>
<table id="backcolor">
  <tr>
    <td><div id="div0" name="divname"> 一月 </div></td>
    <td><div id="div1" name="divname"> 二月 </div></td>
    <td><div id="div2" name="divname"> 三月 </div></td>
    <td><div id="div3" name="divname"> 四月 </div></td>
  </tr>
  <tr>
    <td><div id="div4" name="divname"> 五月 </div></td>
    <td><div id="div5" name="divname"> 六月 </div></td>
    <td><div id="div6" name="divname"> 七月 </div></td>
    <td><div id="div7" name="divname"> 八月 </div></td>
  </tr>
  <tr>
    <td><div id="div8" name="divname"> 九月 </div></td>
    <td><div id="div9" name="divname"> 十月 </div></td>
    <td><div id="div10" name="divname"> 十一月 </div></td>
    <td><div id="div11" name="divname"> 十二月 </div></td>
  </tr>
  <tr>
    <td colspan="4"><div id="div12" style="width: 400px;"> </div></td>
  </tr>
</table>
</body>
</html>

代码描述：js 鼠标悬浮写入元素。js实现鼠标悬浮将当前内容写入其他元素代码实例

下载全部收藏

131 175

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册