鼠标悬停显示浮框

1 . 需要展示的元素

<div class="in_room_tem" hidden="true"> //默认隐藏
<!-- <p> 室内温度1：<span id="tem_1"></span>℃</p> -->
<p> 室内温度2：<span id="tem_2"></span>℃</p>
<p> 室内温度3：<span id="tem_3"></span>℃</p>
<p> 室内温度4：<span id="tem_4"></span>℃</p>
<p> 室内温度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);        // 透明度
}

4 . 效果