鼠标悬停显示浮框

最新推荐文章于 2024-05-15 23:18:27 发布

North_Spark

最新推荐文章于 2024-05-15 23:18:27 发布

阅读量8.8k

点赞数 3

分类专栏： JavaWeb 文章标签：前段开发浮框鼠标悬停

本文链接：https://blog.csdn.net/diyu122222/article/details/78271074

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 . 需要展示的元素

<div class="in_room_tem" hidden="true"> //默认隐藏
    <!-- <p>&nbsp室内温度1：<span id="tem_1"></span>℃</p> -->
    <p>&nbsp室内温度2：<span id="tem_2"></span>℃</p>
    <p>&nbsp室内温度3：<span id="tem_3"></span>℃</p>
    <p>&nbsp室内温度4：<span id="tem_4"></span>℃</p>
    <p>&nbsp室内温度5：<span id="tem_5"></span>℃</p>
</div>

2 . 添加页面加载事件

<script type="text/javascript">
    // 页面加载函数,添加 鼠标悬停室内温度事件
    $(document).ready(function(){  
        // 添加鼠标事件
        $("#curPcId").hover(function () { // 鼠标悬停触发
             $(".in_room_tem").toggle();   // 切换元素显示状态
        });
        $("#in_room_temperature_id").hover(function () {
            $(".in_room_tem").toggle();
        });
    }); 
</script>

3 .添加样式

/* 顶部室内温度样式 */
.in_room_tem{
    width:111px;
    height:75px;
    background:#B7E0F6;
    position:absolute;               // 显示位置
    top:78px;                        //距离顶部
    left:457px;                      //距离左侧  
    font-family:'Tahoma','微软雅黑';
    line-height:18px;                // 行高
    opacity:0.9;                     // 透明度
    filter:alpha(opacity=90);        // 透明度
}