效果展示：
注意事项：
引用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>
