zoukankan      html  css  js  c++  java
  • Js+Css实现鼠标悬浮在特定位置,显示提示信息

    想实现的效果就是数据悬浮在“?”上时出现一个div,有一个解释说明,实现效果如下:

    1、首先实现“?”样式,在网址http://fontawesome.dashgame.com/ 上下载文件。解压后找到css文件夹下font-awesome.min.css

    html页面进行引用

     <link href="/static/font/css/font-awesome.min.css" rel="stylesheet" />

    html代码

    <i class="fa fa-question-circle" style="cursor: pointer;"></i>
    <div class="demo" style="display:none">
        <div>
           <p>
              <span style="font-weight:600">您好:</span>该下班了。
           </p>
        </div>
    </div>

    Js代码实现鼠标滑动上显示div和鼠标离开后隐藏

    $(function () {
        $(".fa-question-circle").hover(
        function () {
            $(".demo").show();
    
        });
        $(".fa-question-circle").mouseout(
            function () {
                $(".demo").hide(); //$(this).hide();      
            });
    });

    Css代码实现div显示在什么位置,大小和样式

       .fa-question-circle {
         cursor: pointer;//实现鼠标活动“?”变成小手
       }
       .demo {
          width: 300px;
          font-size: 12px;
          height: 85px;
          position: absolute;
          top: -10%;
          left: 0%;
          border: 2px solid #ffffff;
          border-radius: 8px;
          background-color: #ffffff;
          box-shadow: 2px 4px 5px #eeeaea;
        }
    
        .demo p {
         padding: 5px 8px;
        }
    
        .demo:after {
          content: '';
          position: absolute;
          border: 10px solid transparent;
          border-top-color: #ffffff;
          top: 100%;
          /*left: 37px;*/
          left: 37%;
        }
  • 相关阅读:
    Swagger配置和使用
    请求SpringMVC接口如何传参数
    ssm搭建配置文件
    永久关闭windows10更新
    VSCode搭建java开发环境
    idea全局设置
    mybatis-plus查询指定字段
    mybayis-plus条件构造器
    Java日期时间操作的一些方法
    C#编写聊天软件客户端
  • 原文地址:https://www.cnblogs.com/xinbaba/p/11762835.html
Copyright © 2011-2022 走看看