标签：box 鼠标 记录 移出 前端 学习 txdh roundicon css

问题描述:

div宽度溢出问题，div设置margin和padding后宽度出现溢出。

解决方式：

css中添加如下代码：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

问题描述：

我想让鼠标移到某个元素上时出现一个新的内容框，类似于各大论坛鼠标移到头像上会出现个人信息。

解决方法：

两种思想：

假设是鼠标移到A元素，使得B元素出现

1.让A和B在同一个父级div内，对父级div进行鼠标进入和移出的判断

2.当鼠标移入A时让B出现，当鼠标移出A时用计时器来进行B的隐藏；当鼠标移入B时，取消计时器，当鼠标移出B时，B隐藏

    
<script type="text/javascript">
        var timer;
        $("#roundicon").mouseenter(function() {
            //$("#content").show();
            $("#roundicon").css("width", "100px");
            $("#roundicon").css("height", "100px");
            $("#txdh").css("display", "block");
        })

        //鼠标移出隐藏
        $("#roundicon").mouseleave(function() {
            timer = setTimeout(() => {
                $("#roundicon").css("width", "50px");
                $("#roundicon").css("height", "50px");
                $("#txdh").css("display", "none");
            }, 1000);
        })
        
        $("#txdh").mouseenter(function() {
            if(timer){clearTimeout(timer);}
        })

        //鼠标移出隐藏
        $("#txdh").mouseleave(function() {
            $("#roundicon").css("width", "50px");
            $("#roundicon").css("height", "50px");
            $("#txdh").css("display", "none");
        })    
    </script>

记得引入jquery.js

标签：box,鼠标,记录,移出,前端,学习,txdh,roundicon,css
来源： https://www.cnblogs.com/jmsstudy/p/16654305.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。