jQuery hover 做tooltip工具提示效果

最新推荐文章于 2024-05-15 23:18:27 发布

yeliping2011

最新推荐文章于 2024-05-15 23:18:27 发布

阅读量2.8k

点赞数

分类专栏： WEB 文章标签： jquery 工具 function stylesheet html css

本文链接：https://blog.csdn.net/yeliping2011/article/details/7359970

版权

WEB 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

工具提示效果

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;
}

yeliping2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery hover 做tooltip工具提示效果

工具提示效果hover css样式中li:hover #aa{color:red;},此时，只能使用hover控制li元素中的#aa元素，即id为aa的必须在li中如果想随意控制页面上的元素则选择jQuery的hover方法html: $(document).ready(function(){ }); $(function(){
复制链接

扫一扫

专栏目录