首页 前端知识 web超简单JQuery鼠标移动到图片上显示文字(超简单提示框属性的运用)

web超简单JQuery鼠标移动到图片上显示文字(超简单提示框属性的运用)

2024-05-31 19:05:54 前端知识 前端哥 422 188 我要收藏

效果展示:

注意事项:

        引用JQuery文件地址和图片地址要更换一下。提示框属性的宽应该和图片的宽保持一致。

 html界面:

 html代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框属性</title>
<style type="text/css">
	#f{
		}
	.one{
		position:relative;
		bottom:52px;
		opacity:0.6;
		background-color:#FFF;
		text-align:center;
		color:#F90;
		width:1200px;
		height:100px;
		font-size:28px;
		}
</style>
<script src="web结课作业/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script type="text/javascript">
        $(function() {
            // JQuery框属性
            $('#f').find('img').mouseenter(function () {
                // 显示下面的下拉菜单
				$('.one').toggle();
            })
            // 鼠标离开后又隐藏
            $('#f').find('img').mouseleave(function () {
                $('.one').hide();
            })
        })
</script>
</head>
<body>
<div id="f">
    <img src="1.jpg" width="1200" height="675">
    <div class="one">秋水共长天一色</div>
</div>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10163.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!