鼠标移到图片上面弹出一个层

最新推荐文章于 2023-11-06 17:19:32 发布

原创最新推荐文章于 2023-11-06 17:19:32 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #class #html #java #div

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的鼠标悬停显示隐藏元素的效果。当鼠标悬停在指定图片上时，会显示一个带有自定义内容的悬浮框，并允许用户通过鼠标在悬浮框区域内移动而不会消失。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="../../scripts/jquery-easyui-1.1/jquery-1.4.2.min.js" mce_src="scripts/jquery-easyui-1.1/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1">.out img{border:1px solid #0F0;} .out .in{width:250px; height:150px; position:absolute; left:180px; top:50px; border:1px solid #ccc; display:none}</style> </head> <body> <div class="out"> <img id="baidu" src="http://www.baidu.com/img/baidu_logo.gif" mce_src="http://www.baidu.com/img/baidu_logo.gif" /> <div id="in" class="in">这里面的内容你自己加.距离也自己调.</div> </div> </body> </html>