在悬停时显示现有div

Question

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.

Answer 1

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/

Answer 2

Why not using toggleClass ?

 $( ".referal" ).on( "mouseenter mouseleave", function( event ) { var id_post = $(this).attr('id'); $('#reply_' + id_post).toggleClass("active"); }); 

 .test { display: none; } .test.active{ display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="referal" id="123">This div has ID 123</div> <div class="test" id="reply_123">This div has ID reply_123</div> 

Answer 3

try this code

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