用jQuery和css实现将鼠标移到一个div显示另一个隐藏的div

因为工作需要，前端样式也需要自己调一下，因此记录一下用到的东西。

用到的jQuery中的mouseenter和mouseleave方法，通过控制元素display属性实现元素的显示和隐藏效果。

html代码：

<! DOCTYPE html>
<html>
	<head>
    	<meta charset= "UTF-8" />
        <title>弹窗提示demo</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
			$(function() {
				var img = $("#tip");
				$("#image").mouseenter(function() {
						img.show();
					});
				$("#image").mouseleave(function() {
						img.hide();
					});
			});
        </script>
    </head>
    <body>
    	<div>
        	<span style="position: relative;">
            	<h3>你好</h3>
                <img id="image" src="info.png" style="position: absolute;top: -12px;margin-left: 38px;width: 27px;"/>
            </span>
            <div id="tip" style="display: none; position: relative;">
                <div style="position: absolute; top: -40px; margin-left: 61px;">
                    这是一个提示窗口
                </div>
            </div>
        </div>
    </body>
</html>

 

实现的效果：

 

鼠标移入的效果：

 

posted on 2021-09-11 17:44  lwk的博客  阅读(839)  评论(0)    收藏  举报