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

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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
CSDN-Ada助手 CSDN-AI 官方账号 2023-05-29 08:27
关注
不知道你这个问题是否已经解决, 如果还没有解决的话:
帮你找了个相似的问题, 你可以看下: 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:
我可以为您提供一种实现鼠标悬停浮窗的方法，代码如下：

<html><head><meta /><title>鼠标悬停浮窗</title><style> .hover-box{ width: 150px; height: auto; padding: 10px; background-color: #fff; box-shadow: 1px 1px 5px #ccc; position: absolute; left: 100px; / 悬浮窗左侧距离 / top: 30px; / 悬浮窗顶部距离 / display: none; / 默认不显示 / } </style></head><body>
悬浮鼠标试试

这里是悬浮框内容
<script></script> </body></html>

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

在HTML中添加一个需要悬浮的元素，如本例中添加了一个div元素，并在鼠标移入和移出时分别触发两个JavaScript事件处理函数showHoverBox()和hideHoverBox()。

在CSS中设置悬浮框的样式，包括宽度、高度、内边距、背景颜色、阴影等属性，并将其默认设置为不显示（display: none），需要使用时再通过JavaScript将其显示。

在JavaScript中获取悬浮框的元素，并分别实现鼠标移入和移出事件的处理函数。鼠标移入时通过style.display属性将悬浮框元素显示，移出时将其隐藏。

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

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

评论

按下Enter换行，Ctrl+Enter发表内容