jQuery hover 做tooltip工具提示效果

来源：互联网发布：数据分析培训cda 编辑：程序博客网时间：2024/04/30 23:21

工具提示效果

hover
css样式中li:hover #aa{color:red;},此时，只能使用hover控制li元素中的#aa元素，即id为aa的必须在li中

如果想随意控制页面上的元素则选择jQuery的hover方法

html:

<Html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script type="text/javascript" src="../testJquery/jquery.js"></script> <script type="text/javascript">$(document).ready(function(){});$(function(){$("#content").hover(function(){$("#tool").show();},function(){$("#tool").hide();});});</script> <link rel="stylesheet" type="text/css" href="tooltip.css"></head><body><div id="content">hello,girlAndBoy</div><div id="tool" style="display:none;"><div id="imageDiv"><img id="ToolTipPointer" src="tooltiparrow.gif"></div><div id="theToolTip" >background<br/>tooltiparrow tooltiparrow</div></div></body></html>

css:

#imageDiv{left:25px;top:28px;position:absolute;z-index:999;}#theToolTip{zindex:9;top:41px;position:absolute;border:solid 1px #748390;width:auto;padding:2 1 1 1px;background-color:#E8EFF9;}