Я хочу, чтобы мышка зависала над именем пользователя, оно должно вывести полное имя пользователя, которое является display: none;
в CSS. Это прекрасно работает, однако, если вы нажмете на кнопку " Загрузить больше", она загрузит оставшиеся комментарии через AJAX и добавит их в существующие, но если вы наведете имя пользователя из одного из них, оно отобразит полное имя всех имен пользователей с исключением первых двух.
HTML:
<div class = 'rows'>
<div class='feed_blocks'>
<div class='feeds'>
<!-- user post goes here -->
<div class = 'comment_data'>
<div class = 'per_comment'> <!-- two comments are displayed first -->
<a href = '#'><p class = 'usernames'>username</p></a>
<div class = 'commenter_details'>
<p> commenter_full_name </p>
</div>
<p>comments..</p>
</div> <!-- end of div per_comment -->
<div class = 'morecomments'><p> Load more </p> </div>
</div><!-- end of div comment_data -->
</div><!-- end of div feeds -->
</div><!-- end of div feed_blocks -->
</div><!-- end of div rows -->
CSS:
.commenter_details {
background: cadetBlue;
color: white;
position: absolute;
padding: 3px;
margin-top: -10px;
margin-left: 10px;
z-index: 100;
display: none;
}
Jquery:
$('.per_comment').on('mouseenter', ".usernames", function () {
var $this = $(this);
$this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$('.feeds').on('mouseleave', ".usernames", function () {
var $this = $(this);
$this.parents('.per_comment').find('.commenter_details').hide();
});
AJAX:
<div class = 'per_comment'> <!-- two comments are displayed first -->
<a href = '#'><p class = 'usernames'>username</p></a>
<div class = 'commenter_details'>
<p> commenter_full_name </p>
</div>
<p>comments..</p>
</div> <!-- end of div per_comment -->
Любая помощь, которая позволит иметь работу вокруг этого, будет глубоко оценена.
Это работает для меня:
$(document).on('mouseenter', ".usernames", function () {
var $this = $(this);
$this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$(document).on('mouseleave', ".usernames", function () {
var $this = $(this);
$this.parents('.per_comment').find('.commenter_details').hide();
});