制作鼠标移动到div上面显示弹出框
<div class="show-dialog hide">
<header>
<div class="note">
<span class="title">三代亲子嘉年华</span> <span class="info"> <span class="username">周乃容</span> <span class="split">|</span> <img src="/resources/img/liveSupport/live/zbbfcs_1.png"> <span class="playcount">3.6万</span> <img
src="/resources/img/liveSupport/review/zbpl_1.png"> <span class="viewcount">3562</span>
</span>
</div>
<img src="/resources/img/liveSupport/review/jchgtx_3.png">
</header>
<footer>
<img src="/resources/img/liveSupport/live/zzzbfm_8.png">
<p>作者唐朝诗人白居易。草原上的野草 生长得很茂盛,每到秋天就枯黄了, 这样年复一年。野火烧得也不可能。</p>
</footer>
</div>
/*dialog*/
.show-dialog {
width: 330px;
height: 160px;
background-color: #fff;
border: 1px solid #CCD0D7;
padding: 14px;
position: absolute;
border-radius: 4px;
} .show-dialog>header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid #E5E9EF;
} .show-dialog>header>.note>span {
display: block;
} .show-dialog>header>.note>.title {
color: #333;
font-size: 16px;
} .show-dialog>header>.note>.info {
color: #99A2AA;
font-size: 12px;
display: flex;
align-items: center;
margin-top: 5px;
} .show-dialog>header>.note>.info>.split {
padding: 0 10px;
} .show-dialog>header>.note>.info>.playcount, .show-dialog>header>.note>.info>.viewcount {
padding: 0 25px 0 3px;
} .show-dialog>footer {
display: flex;
align-items: center;
margin-top: 10px;
} .show-dialog>footer>img {
width: 96px;
height: 60px;
} .show-dialog>footer>p {
color: #99A2AA;
font-size: 10px;
margin-left: 10px;
}
$('.default-right>li').hover(function(e) {
var position = $(this).offset();
$(".show-dialog").css({
left : position.left,
top : position.top - 165
}).removeClass('hide');
}, function(e) {
$(".show-dialog").addClass('hide');
});
总结:
1、jquery使用offset()比position()更精确
制作鼠标移动到div上面显示弹出框的更多相关文章
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...
- 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法
今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...
- div 模拟alert弹出框
--------------信息展示弹出框---------------- <style> .over{background-color: rgba(0, 0, 0, 0.7);displ ...
- 使用layer显示弹出框笔记
$.layer({ area : ['200px','auto'], //控制层宽高.当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐这样做.例如:area : ['310px ...
- iOS开发技巧 - 使用Alerts和Action Sheets显示弹出框
解决方案: (Swift) 使用UIAlertController类 (Objective-C) 使用UIAlertView类 代码: (Swift) import UIKit class ViewC ...
- php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失
<div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- phoenixframe自己主动化測试平台对div弹出框(如弹出的div登陆框)的处理
package org.phoenix.cases; import java.util.LinkedList; import org.phoenix.action.WebElementActionPr ...
随机推荐
- linux screen 命令详解[转]
一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...
- 这是经典的"百马百担"问题,有一百匹马,驮一百担货,大马驮3担,中马驮2担,两只小马驮1担,问有大,中,小马各几匹?
- WIN 下的超动态菜单(二)用法
WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ ...
- HTTP协议小结
HTTP/0.9已过时.只接受GET一种请求方法,没有在通讯中指定版本号,且不支持请求头.由于该版本不支持POST方法,因此客户端无法向服务器传递太多信息. HTTP/1.0 这是第一个在通讯中指定版 ...
- Debian deb源方法升级PHP软件包
学习Linxu以来,一直坚持编译方式安装软件包,貌似圈子里面也是都倾向于编译,可是搜索到的编译方法都是一堆复制粘贴来的指令, 每个人都这么编译, 却几乎没有人去写明那些五花八门的编译指令代表了什么,是 ...
- node js学习(二)——REPL(交互式解释器)
1.简介 Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输 ...
- S5PV210的内存分配研究分析
S5PV210内存一般会使用SDRAM和DDR2 (DDR SDRAM),SDRAM的uboot启动网络已经有很多资料的,对于DDR2还有有很多疑惑,如果有错误的地方,请大家一定指出,醍醐灌顶,不胜感 ...
- 鸿雁电器oa系统中决策支持模块效果
公司简介鸿雁电器是国内著名的建筑电器产品的生产.经营企业,同时也是国家863计划CIMS(计算机集成制造系统)应用工程示范企业.浙江省高新技术企业.浙江省专利示范企业和杭州市信息化试点企业.企业系统泛 ...
- NOIP2010引水入城[BFS DFS 贪心]
题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N 行M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个海拔高度. ...
- POJ3783Balls[DP 最坏情况最优解]
Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 907 Accepted: 598 Description T ...