首页 \ 问答 \ 在悬停时显示现有div(Show an existing div on hover)

在悬停时显示现有div(Show an existing div on hover)

我想稍微增强我的论坛软件。 假设我有一个ID为123的div。

现在有人回复这个div并引用它。 如果有人在报价上盘旋,我想展示这个div。

到目前为止我试过这个但没有成功。

$(".referal").hover(function() {
    var id_post = $(this).attr('id')
    $('#reply_' + id_post).show();
});

它获得了正确的ID,但只有在我将其粘贴到控制台中时才会被执行。 现有的div也不会在报价附近第二次显示。

我是否错误地将节目事件弄错了? 我之前尝试过.clone但也没有成功。


I want to enhance my forum software a bit. Lets say I have an div with the ID: 123.

Now someone replies to this div and quotes it. I want to show this div if someone hovers over the quote.

I tried this so far but no success.

$(".referal").hover(function() {
    var id_post = $(this).attr('id')
    $('#reply_' + id_post).show();
});

It gets the right ID but somehow only gets executed if I paste it in the console. The existing div also won't be displayed a second time near the quote.

Am I mistaken the show event somehow? I tried with .clone before but also no success.


原文:https://stackoverflow.com/questions/43374683
更新时间:2022-11-23 18:11

最满意答案

编辑:处理邮政编号作为全球ID:

var id_post;
$(".referal").hover(function() {
    id_post = $(this).attr('id')
    $('#reply_' + id_post).show();    
});

$(".referal").on("mouseout",function() {
    $('#reply_'+id_post).hide();
});

的jsfiddle

https://jsfiddle.net/0vjkxz9y/4/

这是您想要做的工作示例:

$('#reply_5').hide();
$(".referal").hover(function() {
    var id_post = $(this).attr('id')
    $('#reply_' + id_post).show();
});

$(".referal").on("mouseout",function() {
    $('#reply_5').hide();
});

https://jsfiddle.net/0vjkxz9y/


EDIT: Handle post number as a global id:

var id_post;
$(".referal").hover(function() {
    id_post = $(this).attr('id')
    $('#reply_' + id_post).show();    
});

$(".referal").on("mouseout",function() {
    $('#reply_'+id_post).hide();
});

JSFiddle

https://jsfiddle.net/0vjkxz9y/4/

This is a working example of what you want to do:

$('#reply_5').hide();
$(".referal").hover(function() {
    var id_post = $(this).attr('id')
    $('#reply_' + id_post).show();
});

$(".referal").on("mouseout",function() {
    $('#reply_5').hide();
});

https://jsfiddle.net/0vjkxz9y/

相关问答

更多
  • 如果你想要纯粹的CSS比你能做到这一点.... 在下面的CSS中,在初始化/页面加载时,我使用display: none;隐藏了子元素display: none; 然后hover父元素,说有一个class parent_div ,我使用display: block; 取消隐藏元素。 .hotqcontent { display: none; /* I assume you'll need display: none; on initialization */ } .parent_div:ho ...
  • 编辑:处理邮政编号作为全球ID: var id_post; $(".referal").hover(function() { id_post = $(this).attr('id') $('#reply_' + id_post).show(); }); $(".referal").on("mouseout",function() { $('#reply_'+id_post).hide(); }); 的jsfiddle https://jsfiddle.net/0vjkxz ...
  • 为什么你用这个jQuery? 我会用这个CSS的悬停 .outdiv:hover .innerdiv { display: block; // adjust for your method of hiding the div } Why are you using jQuery for this? I'd go with a css hover for this one .outdiv:hover .innerdiv { display: block; // adjust for your met ...
  • 可悲的是 (幸运的是)你不能使用CSS 在DOM树上 “导航”。 你只能瞄准下一个兄弟姐妹和子元素(你可能已经知道了)。 在这个特定的情况下,JavaScript可以帮助你: function showTarget(el) { var target = document.querySelector("[data-target='"+ el.dataset.hovershow +"']"); el.addEventListener("mouseenter", function() { ...
  • 你可以悬停在父元素上,这似乎使它工作,例如: div.overlay:hover { visibility: visible; } 小提琴: http : //jsfiddle.net/52sM5/ You could hover on the parent element and that seems to make it work e.g: div.overlay:hover { visibility: visible; } Fiddle: http://jsfiddle.net/5 ...
  • 检查一下: http : //jsfiddle.net/4mcz0axk/ Div显示但颜色的文本是白色的,因此它可能不可见。 在小提琴共享中,我故意将其改为黑色并且它工作得非常好。 #banner { -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topri ...
  • 你不能用CSS做到这一点但是 您可以尝试使用jQuery,请参阅小提琴: https : //jsfiddle.net/nileshmahaja/4ghws6wz/3/ $(".innerDiv").mouseover(function(){ $(this).parent().siblings().css('opacity', 1); }); $(".innerDiv").mouseout(function(){ $(this).parent().siblings().css('opacity', ...
  • https://jsfiddle.net/yv6pyk7a/ .secondDiv:hover { display:block; } .secondDiv > li:hover { background: #aaa; cursor: pointer; } 只要检查一下。 希望它能解决问题。 https://jsfiddle.net/yv6pyk7a/ .secondDiv:hover { display:block; } .secondDiv > li:hover ...
  • 如果您将
    移到带有onmouseover的td中,而不是技术上将div放在td中,那么鼠标离开表格单元格和“drop1”div时,会触发鼠标事件。 但是如果你需要设置drop1样式,你应该考虑到上边距会破坏td的连续性,当箭头触及边距时onmouseout事件将会触发。 这里(很粗糙)jsfiddle来演示它: https ://jsfiddle.net/uxnu65wf/ PS使用这种方法你可能不需要javascript,因为可以通过使用:hover in css来实现。 I ...
  • 或者尝试以下。 Pop me
    My third popover content goes here.