div块怎么随着鼠标移动，鼠标事件js代码实现div移动功能

来源：整理时间：2023-07-06 13:41:40 编辑：航空兔素材手机版

本文目录一览

1，鼠标事件js代码实现div移动功能
2，CSS DIV 怎么做出来鼠标移动上就显示其内容

1，鼠标事件js代码实现div移动功能

<div id="outer"><div id="inner">inner</div></div>//css#outer #inner //jsvar i = document.getElementById("inner");i.onmouseover = function() this.style.top = -200; } i.onmouseout = function() this.style.top = 0; }

鼠标事件js代码实现div移动功能

2，CSS DIV 怎么做出来鼠标移动上就显示其内容

用css伪类hover可以实现这个功能。1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式为块级元素“block”：4、这样当鼠标移动到div上时就会显示p标签内容，鼠标离开就不显示p标签内容：

定义和用法:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。说明这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：a:link a:visited a:hover a:active 注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！注释：Pseudo-class（伪类）的名称对大小写不敏感。注释：伪类可与 CSS 类配合使用：<html><head><style type="text/css">a:link a:visited a:hover a:active </style></head><body><p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p></body></html>from http://www.w3school.com.cn/cssref/pr_pseudo_hover.asp

复制下面的代码放到html文件保存就实现了。<br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>无标题文档</title><br><script type="text/javascript" src="http://img.lanrentuku.com/img/js/jquery.js"></script><br><br><br><script><br>$(function(){<br>var aa="这些一行文字就写到这里面";<br>alert(aa);<br>$("#testID").mouseover(function(){<br>$(this).text(aa);<br>}).mouseout(function(){<br>$(this).text("");<br>}); <br>})<br></script><br></head><br><body><br><br><div style="width:400px; height:50px; margin:0 auto; background-color:#6C3; color:#FC6; font-size:20px; font-weight:bold; line-height:50px; text-align:center;" id="testID"><br></div><br></body><br></html>

11111111 22222222 33333333 不用js顶多这种效果网易那种都是js改类名做的

单纯的div+css可以用hover属性来做也可以用onmouseover~如果可以用javascript或者其他组建方法就多了 jquery的hover属性等~

CSS DIV 怎么做出来鼠标移动上就显示其内容