在鼠标悬停在跨度上时显示DIV
Show DIV at mouse cursor on hover of span
当用户悬停在SPAN或div上时,我希望div取消隐藏并显示在鼠标光标处。
我制作了这个函数,但它不起作用(jquery已加载(。
function ShowHoverDiv(divid){
function(e){
var left = clientX + "px";
var top = clientY + "px";
$("#"+divid).toggle(150).css("top",top).css("left",left).css("position","fixed");
return false;
}
}
<div id="divtoshow" style="display:none">test</div>
<br><br>
<span onmouseover="ShowHoverDIV('divtoshow')">Mouse over this</span>
您几乎做到了:
function hoverdiv(e,divid){
var left = e.clientX + "px";
var top = e.clientY + "px";
var div = document.getElementById(divid);
div.style.left = left;
div.style.top = top;
$("#"+divid).toggle();
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divtoshow" style="position: fixed;display:none;">test</div>
<br><br>
<span onmouseover="hoverdiv(event,'divtoshow')" onmouseout="hoverdiv(event,'divtoshow')">Mouse over this</span>
我快速设置了这个例子,从Dušan Radojević代码开始:
$("#spanhovering").hover(function(event) {
$("#divtoshow").css({top: event.clientY, left: event.clientX}).show();
}, function() {
$("#divtoshow").hide();
});
jsfiddle
实际上,我更喜欢命令式的答案。我没有权限在他的帖子中添加评论,所以这是他的代码,经过调整使其适应性更强:
$(".spanhover").hover(function(event) {
var divid = "#popup" + $(this).attr("id")
$(divid).css({top: event.clientY, left: event.clientX}).show();
}, function() {
var divid = "#popup" + $(this).attr("id")
$(divid).hide();
});
http://jsfiddle.net/SiCurious/syaSa/
您需要在div和span-id命名约定方面稍微聪明一点。
$('#divToShow,#span').hover(function(e){
var top = e.pageY+'px';
var left = e.pageX+'px'
$('#divToShow').css({position:'absolute',top:top,left:left}).show();
},
function(){
$('#divToShow').hide();
});
<div id="divToShow" style="display:none">test</div>
<br/><br/>
<span id="span" >Mouse over this</span>
我认为这个代码将对您的情况有用。
相关文章:
- JavaScript/jQuery:显示DIV,直到用户停止在Textbox中键入
- 在if/else语句中显示DIV
- onSubmit在php脚本的开头显示DIV
- 使用getElementsByClassName在点击时显示Div的Javascript
- 使其在悬停文本时显示Div
- 如何只在收到服务器的回复消息后显示DIV
- 隐藏/显示DIV
- 简单的多选项卡隐藏/显示DIV
- 当满足javascript/jquery条件时显示DIV(包括jsFiddle链接)
- Javascript在秒消失时显示DIV元素,并在此之后隐藏栏的选项
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- 单击时隐藏并显示 Div
- 如果选择了所有无线电中的任何一个选项,则显示 Div
- 如何根据 Div ID 内容隐藏/显示 DIV
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 检测YouTube时间然后显示DIV?使用 JavaScript
- 按自定义顺序显示 DIV
- 当用户从页面底部达到 X 像素时,如何显示 DIV
- 在提交时显示 DIV 的内容
- 单击单选选择时动态显示 DIV