如何在鼠标悬停时创建弹出式div，并在点击时保持不动 [英] How to create a pop-up div on mouse over and stay when click
本文介绍了如何在鼠标悬停时创建弹出式div，并在点击时保持不动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图创建弹出窗口，可以显示鼠标悬停时的状态，并在点击链接时保持不动。问题是我已经使弹出窗口在鼠标悬停时显示，但当鼠标离开时它会消失。如何让弹出窗口在点击时保持显示状态。这是我的代码：
HTML
< div id =pop1class =popbox>
< h2>工作信息搜索< / h2>
< h2> WRKNo：< input type =text/>< / h2>
< h2>结果< / h2>
< p>客户名称：< input type =text/>< / p>
< p>来电号码：< input type =text/>< / p>
< p> Complosed：< input type =text/>< / p>
< p> Cate：< input type =text/>< / p>
< p> Det：< input type =text/>< / p>
< p>反馈：< input type =text/>< / p>
< p> WRKNo：< input type =text/>< / p>
< / div>
这是一个popbox测试。 < a href =＃class =popperdata-popbox =pop1>悬停在这里< / a>看看它是如何工作的。
CSS
.popbox {
display：none;
位置：绝对;
z-index：99999;
width：400px;
padding：10px;
背景：#EEEFEB;
颜色：＃000000;
border：1px solid＃4D4F53;
margin：0px;
-webkit-box-shadow：0px 0px 5px 0px rgba（164，164，164，1）;
box-shadow：0px 0px 5px 0px rgba（164，164，164，1）;
}
.popbox h2
{
background-color：＃4D4F53;
颜色：＃E3E5DD;
font-size：14px;
display：block;
宽度：100％;
margin：-10px 0px 8px -10px;
padding：5px 10px;
}
Javascript $ b
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.jstype = 文本/ JavaScript的 >< /脚本>
< script>
$（function（）{
var moveLeft = 0;
var moveDown = 0;
'（'a.popper'）。hover（function（e）{
var target ='＃'+（$（this）.attr（'data-popbox'））;
$ b $（target）.show（）;
moveLeft = $（this）.outerWidth（）;
moveDown =（$（target）.outerHeight（）/ 2）;
}，function（）{
var target ='＃' +（$（this）.attr（'data-popbox'））;
$（target）.hide（）;
}）;
$（'a。 popper'）。mousemove（function（e）{
var target ='＃'+（$（this）.attr（'data-popbox'））;
leftD = e。 pageX + parseInt（moveLeft）;
maxRight = leftD + $（target）.outerWidth（）;
windowLeft = $（window）.width（） - 40;
windowRight = 0;
maxLeft = e.pageX - （parseInt（moveLeft）+ $（target）.outerWidth（）+ 20）;
if（maxRight> windowLeft&& maxLeft> windowRight）
{
le ftD = maxLeft;
}
topD = e.pageY - parseInt（moveDown）;
maxBottom = parseInt（e.pageY + parseInt（moveDown）+ 20）;
windowBottom = parseInt（parseInt（$（document）.scrollTop（））+ parseInt（$（window）.height（）））;
maxTop = topD;
windowTop = parseInt（$（document）.scrollTop（））;
if（maxBottom> windowBottom）
{
topD = windowBottom - $（target）.outerHeight（） - 20;
} else if（maxTop< windowTop）{
topD = windowTop + 20;
$（target）.css（'top'，topD）.css（'left'，leftD）;
}）;
}）;
< / script>
任何想法我都可以做到这一点？
解决方案
试试这个：
$（'a.popper'）。hover函数（e）{
var target ='＃'+（$（this）.attr（'data-popbox'））;
$（target）.show（）;
moveLeft = $（this）.outerWidth（）;
moveDown =（$（target）.outerHeight（）/ 2）;
}，function（）{
var target ='＃'+ （$（this）.attr（'data-popbox'））;
if（！（$（a.popper）。hasClass（show）））{
$（target） .hide（）; //不点击时隐藏弹出框
}
}）;
'（'a.popper'）。click（function（e）{
var target ='＃'+（$（this）.attr（'data-popbox'））; $ b $如果（！（$（this）.hasClass（show）））{
$（target）.show（）;
}
$（this）.toggleClass（show ）;
}）;
I'm trying to create popup that can show when mouse over it and will stay when click on the link .The problem is I already make the popup will show up when the mouse over it but it will disappear when the mouse leave .How can I make the popup will stay show up when clicked .This is my code :
HTML
<div id="pop1" class="popbox">
<h2>Job Info Search</h2>
<h2>WRKNo : <input type="text" /></h2>
<h2>Result</h2>
<p>Customer Name : <input type="text" /></p>
<p>Caller Number : <input type="text" /></p>
<p>Complosed : <input type="text" /></p>
<p>Cate : <input type="text" /></p>
<p>Det : <input type="text" /></p>
<p>Feedback : <input type="text" /></p>
<p>WRKNo : <input type="text" /></p>
</div>
This is a popbox test. <a href="#" class="popper" data-popbox="pop1">Hover here</a> to see how it works.
CSS
.popbox {
display: none;
position: absolute;
z-index: 99999;
width: 400px;
padding: 10px;
background: #EEEFEB;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2
{
background-color: #4D4F53;
color: #E3E5DD;
font-size: 14px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;
}
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
var moveLeft = 0;
var moveDown = 0;
$('a.popper').hover(function(e) {
var target = '#' + ($(this).attr('data-popbox'));
$(target).show();
moveLeft = $(this).outerWidth();
moveDown = ($(target).outerHeight() / 2);
}, function() {
var target = '#' + ($(this).attr('data-popbox'));
$(target).hide();
});
$('a.popper').mousemove(function(e) {
var target = '#' + ($(this).attr('data-popbox'));
leftD = e.pageX + parseInt(moveLeft);
maxRight = leftD + $(target).outerWidth();
windowLeft = $(window).width() - 40;
windowRight = 0;
maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
if(maxRight > windowLeft && maxLeft > windowRight)
{
leftD = maxLeft;
}
topD = e.pageY - parseInt(moveDown);
maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
maxTop = topD;
windowTop = parseInt($(document).scrollTop());
if(maxBottom > windowBottom)
{
topD = windowBottom - $(target).outerHeight() - 20;
} else if(maxTop < windowTop){
topD = windowTop + 20;
}
$(target).css('top', topD).css('left', leftD);
});
});
</script>
Any ideas how I can do this?
解决方案
Try this:
$('a.popper').hover(function (e) {
var target = '#' + ($(this).attr('data-popbox'));
$(target).show();
moveLeft = $(this).outerWidth();
moveDown = ($(target).outerHeight() / 2);
}, function () {
var target = '#' + ($(this).attr('data-popbox'));
if (!($("a.popper").hasClass("show"))) {
$(target).hide(); //dont hide popup if it is clicked
}
});
$('a.popper').click(function (e) {
var target = '#' + ($(this).attr('data-popbox'));
if (!($(this).hasClass("show"))) {
$(target).show();
}
$(this).toggleClass("show");
});
这篇关于如何在鼠标悬停时创建弹出式div，并在点击时保持不动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
