制作鼠标移动到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 ...
随机推荐
- python写的分析mysql binlog日志工具
因为数据库增删改突然暴增,需要查询是那些表的操作特别频繁,写了一个用来分析bin-log的小工具,找出增删改查的表,并按照操作次数降序排列,以下是代码: 1 2 3 4 5 6 7 8 9 10 11 ...
- Rollback 语句 在08R2版本
有时候为了数据完整我们会启用到事务.正常的时候一帆风顺,如果rollback 呢? 最简单的一个回滚 IF OBJECT_ID('PROC1') IS NOT NULL DROP PROCED ...
- mysql5.6源码安装
1.环境介绍: 包:mysql-5.6.24.tar.gz 平台:centos6.5 2.安装cmake编译工具和依赖包: yum install cmake -y yum install ncurs ...
- Python基础之set与函数
set集合 set 是无序,不重复的序列,基本功能包括去重和关系测试,集合中没有插入的方法,只能添加. 集合对象还支持union(联合), intersection(交), difference(差) ...
- 列表list
Python是一种面向对象的语言,但它不像C++一样把标准类都封装到库中,而是进行了进一步的封装,语言本身就集成一些类和函数,比如print,list,dict etc. 给编程带来很大的便捷 Pyt ...
- Linux磁盘管理之设备文件详解04
Linux一切接文件,除了普通文件和目录文件,还包括一些其它的特殊文件:块设备文件.字符设备文件.套接字文件.链接文件等.今天这里主要说一下常见的块设备文件和字符设备文件,这2类是最常见的设备文件类. ...
- C语言(函数)学习之index、rindex
函数定义:char *index(const char *s, int c); 头文件: #include strings.h 函数说明:index()用来找出参数s 字符串中第一个出现的参数c ...
- 中科院分词ICTCLAS5.0_JNI 使用方法
1.简介 中国科学院计算技术研究所在多年研究基础上,耗时一年研制出了基于多层隐码模型的汉语词法分析系统 ICTCLAS(Institute of Computing Technology, Chine ...
- java报表工具FineReport常用函数的用法总结(数学和三角函数)
ABS ABS(number):返回指定数字的绝对值.绝对值是指没有正负符号的数值. Number:需要求出绝对值的任意实数. 示例: ABS(-1.5)等于1.5. ABS(0)等于0. ABS(2 ...
- 二分+最短路判定 BZOJ 2709: [Violet 1]迷宫花园
BZOJ 2709: [Violet 1]迷宫花园 Sample Input 5 ######### # # # # # # # #S# # ##### # # ## # # # ### ### ## ...