鼠标移入显示房间信息

Posted 2022-01-02 是小叶的呢.

在做酒店管理系统的时候，有这样一个功能，鼠标移入房态图，就会把房态图里面的房间信息显示出来，让我们来看看这个效果是怎么实现的。
首先给每个if语句里面拼接一个

并给他一个类。
代码如下：

Css样式如下：

一开始这个

是直接显示出来的，我们要设置它的属性为隐藏display：none，当我们的鼠标放上去这个

里面的内容就显示出来。
在这里我写了两个鼠标移入事件，通过字符串的拼接来实现我们想要的效果，这里注意一个点：当鼠标移出时，要清空之前的内容。javascript代码如下：

控制器方法如下：首先是鼠标移入空净房条件查询查询出来的内容

鼠标移入预定的客人登记过的条件查询出来的内容

这样就可以实现我们想要的效果图如下：