html中鼠标悬停浮窗的设置


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <link rel="stylesheet" href="ll.css">
   
       
</head>
<body background="1.jpg"
style="background-repeat:no-repeat;
background-attachment:fixed;
background-size: 100% 100%;">
   <header>
    <h1>标题</h1>
   </header>
    


  <div class="a">
    <img src="2.jpg" alt="">
    <div class="spba">              
        <span class="jpa">景区管理</span><br>
        <a href="">景区查询和统计分析</a> 
        
      
      
    
    </div>
   </div>

  <div class="b">
    <img src="2.jpg" alt="">
    <div class="spbb">
        <span class="jpb">景点管理</span><br>
        <b href="">景点查询和统计分析</b> 
        <div class="tt"></div>
        
       
    </div>
   </div>
  

   <div class="c">
    <img src="2.jpg" alt="">
    <div class="spbc">
        <span class="jpc">评论管理</span><br>
        <c href="">评论查询和统计分析</c> 
        
    </div>
   </div>

   <div class="d">
    <img src="2.jpg" alt="">
    <div class="spbd">
        <span class="jpd">推荐管理</span><br>
        <d href="">用户的旅游需求和推荐结果</d> 
       
    </div>
   </div>

</body>
</html>

*{
  margin: 0;  
  padding: 0;
  box-sizing: border-box;
}
header{
    position: relative;/*子绝父相*/
    background: #ccc;
    text-align: center;
    height: 125px;
    background-size: 100% 100%;
 }
 header>h1{  /*子选择器*/
   
    font-size: 4vh;
    color: rgb(10, 11, 12);
    text-align: center;
    line-height:125px; /*要等于头部高度才可以使字体居中*/

}
div{
    white-space:nowrap;
}
html{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: 0;

}
.a{
    width: 200px;
    height: 300px;
    background: aquamarine;
    margin-top: 100px;
    margin-left: 70px;
    line-height: 90px;
    border: 1px solid rgb(21, 21, 19);
    border-radius: 10px ;
    overflow: hidden;
    float: left;
    box-shadow: 0px 1px 3px #666;
   
}
.b{
    width: 200px;
    height: 300px;
    background: aquamarine;
    margin-top: 100px;
    margin-left: 200px;
    line-height: 90px;
    border: 1px solid rgb(21, 21, 19);
    border-radius: 10px ;
    overflow: hidden;
    float: left;
    box-shadow: 0px 1px 3px #666;
    position: relative;
}
 
.c{
    width: 200px;
    height: 300px;
    background: aquamarine;
    margin-top: 100px;
    margin-left: 200px;
    line-height: 90px;
    border: 1px solid rgb(21, 21, 19);
    border-radius: 10px ;
    overflow: hidden;
    float: left;
    box-shadow: 0px 1px 3px #666;
}
.d{
    width: 200px;
    height: 300px;
    background: aquamarine;
    margin-top: 100px;
    margin-left: 200px;
    line-height: 90px;
    border: 1px solid rgb(21, 21, 19);
    border-radius: 10px ;
    overflow: hidden;
    float: left;
    box-shadow: 0px 1px 3px #666;
}
.d img{
    width: 200px;
    height: 210px;
    float: left;
}
.c img{
    width: 200px;
    height: 210px;
    float: left;
}
.b img{
    width: 200px;
    height: 210px;
    float: left;
}


.a img{
    width: 200px;
    height: 210px;
    float: left;
}
.spbd{
    width: 200px;
    height: 90px;
    background: #fff;
    float: left;
    line-height: 30px;
    text-align: center;
}
.spbc{
    width: 200px;
    height: 90px;
    background: #fff;
    float: left;
    line-height: 30px;
    text-align: center;
}

.spba{
    width: 200px;
    height: 90px;
    background: #fff;
    float: left;
    line-height: 30px;
    text-align: center;
  
}
.spbb{
    width: 200px;
    height: 90px;
    background: #fff;
    float: left;
    line-height: 30px;
    text-align: center;
    

}

.jpa{
    color:red;
    font-weight:bold ;
    font-size: 20px;
}
.jpb{
    color:red;
    font-weight:bold ;
    font-size: 20px;
}
.jpc{
    color:red;
    font-weight:bold ;
    font-size: 20px;
}
.jpd{
    color:red;
    font-weight:bold ;
    font-size: 20px;
}
a{
    text-decoration: none;
    color: #000;

}
a:hover{
    color:red
}
b{
    text-decoration: none;
    color: #000;

}
b:hover{
    color:red
}
.tt{
    position: absolute;
    top:525px;
    left: 0;
    width: 100%;
    height: 100px;
    border-top: 1px solid #c24242;
    background-color: #871010;
    box-shadow: 0 3px 4px rgba(0,0,0,0.18);
}

请大家帮我检查一下我的代码，是这样的，我想要将鼠标移动至图中这个字段的位置悬停时，会出现一个弹窗来，然后这个弹窗内会有其他内容供我选择，就很像京东的那种

然后我跟着教程做的，可能是我的位置没有放对，一直没有达到我想要到效果，所以想请大家帮我看一下应该怎么改正，谢谢！

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7641985
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：用html写一个按钮，点击按钮就可以弹出一个输入框表单，可以在里面写信息。
除此之外, 这篇博客: HTML中的函数使用基础（函数定义，函数调用，函数参数，函数返回值，嵌套函数，递归函数，变量作用域，内置函数，其他定义函数的方法）中的 2.2在事件响应中调用函数 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件，在JavaScript语言中，将函数于事件相关联就完成了响应事件的过程。例如当用户单击某个按钮时执行相应的函数。
可以使用如下代码实现以尚功能：
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数定义</title>
		<script>
			function test(){
				alert('我喜欢林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<form action="" method="post" name="form1">
			<input type="button" value="提交" onclick="test()" />
		</form>
	</body>
</html>
```
以下回答来自chatgpt:
我可以为您提供一种实现鼠标悬停浮窗的方法，代码如下：

鼠标悬停浮窗

悬浮鼠标试试

这里是悬浮框内容

以上代码中，利用了CSS样式的position属性和JavaScript的事件处理函数来实现鼠标悬停浮窗。具体步骤如下：

在HTML中添加一个需要悬浮的元素，如本例中添加了一个div元素，并在鼠标移入和移出时分别触发两个JavaScript事件处理函数showHoverBox()和hideHoverBox()。
在CSS中设置悬浮框的样式，包括宽度、高度、内边距、背景颜色、阴影等属性，并将其默认设置为不显示（display: none），需要使用时再通过JavaScript将其显示。
在JavaScript中获取悬浮框的元素，并分别实现鼠标移入和移出事件的处理函数。鼠标移入时通过style.display属性将悬浮框元素显示，移出时将其隐藏。

以上是一种简单实用的鼠标悬停浮窗的实现方法，您可以根据需要对其进行更改和优化。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

为需要添加浮窗的元素添加一个父元素，并将该父元素的position属性设置为relative，以便后面的绝对定位。

在父元素内添加一个子元素，作为浮窗。将该子元素的display属性设置为none，以便在鼠标悬停时再显示出来。

使用:hover伪类来控制浮窗的显示。将:hover伪类添加到父元素上，并将子元素的display属性设置为block或inline-block，以便在鼠标悬停时显示出来。

<style>
    .parent {
        position: relative;
    }
    .tooltip {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    .parent:hover .tooltip {
        display: inline-block;
    }
</style>

<div class="parent">
    <img src="image.jpg" alt="">
    <div class="tooltip">
        <p>这是一个浮窗</p>
    </div>
</div>

在这个示例中，将图片和浮窗放在了一个父元素中，并为父元素设置了position: relative。浮窗的样式设置为position: absolute，并将top属性设置为100%，这样浮窗就会出现在父元素下方。将浮窗的display属性设置为none，以便在鼠标悬停时再显示出来。

最后，使用:hover伪类来控制浮窗的显示。将:hover伪类添加到父元素上，并将浮窗的display属性设置为inline-block，这样在鼠标悬停时就会显示出浮窗。