当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - live() mouseenter/hover

问题描述:

$('.WallEntry').live('mouseover mouseout', function(event) {

if (event.type == 'mouseover') {

$(this).find('.delButton').css('visibility', 'visible');

}else{

$(this).find('.delButton').css('visibility', 'hidden');

}

});

CSS:

.WallEntry{

width: 300px;

}

HTML

<div class='WallEntry'>

Message: <br>

Hi, have you been there..?

<div style='visibility: hidden' class='delButton'></div>

</div>

What I would like to do:

When you hover the message(the element WallEntry), the delButton should appear. When you mouseaway away, it should hide.

I have tried:

$(".WallEntry").live("hover", function(){

$(this).find('.delButton').css('visibility', 'visible');

}, function() {

$(this).find('.delButton').css('visibility', 'hidden');

});

But then I got told that live() doesnt handle two functions.

My code at top´s issue is that it doesn't show the delButton on the appended div elements with WallEntry.

How should this be done?

网友答案:

I suggest, if you don't need to support IE6, removing all of your script for the hover, and just doing this in CSS:

.WallEntry .delButton { visibility: hidden; }
.WallEntry:hover .delButton { visibility: visible; }

If you have to support IE6, use this CSS:

.WallEntry .delButton { visibility: hidden; }
.WallEntry.hover .delButton, .WallEntry:hover .delButton { visibility: visible; }

And this script:

$(".WallEntry").live("hover", function() {
   $(this).toggleClass('hover');
});

Or, to be completely safe:

$(".WallEntry").live("mouseenter", function() {
   $(this).addClass('hover');
}).live("mouseleave", function() {
   $(this).removeClass('hover');
});

And if the parent container has an ID, the .delegate() version:

$("#parentID").delegate(".WallEntry", "mouseenter", function() {
   $(this).addClass('hover');
}).delegate(".WallEntry", "mouseleave", function() {
   $(this).removeClass('hover');
});
网友答案:

May not be your problem, but couldn't you just do:

$('.WallEntry').mouseover(function() {

    $('.delButton').show();
}

$('.WallEntry').click(function() {

    $('.delButton').hide();

}
网友答案:

what's wrong with this?

$('.WallEntry').live('mouseover', function(event) {
  $(this).find('.delButton').css('visibility', 'visible');
}); 

$('.WallEntry').live('mouseout', function(event) {
  $(this).find('.delButton').css('visibility', 'hidden');
}); 

I would suggest this if you were using display:none; instead of visibility:hidden;

$('.WallEntry').live('mouseover', function(event) {
  $(this).find('.delButton').show();
}); 

$('.WallEntry').live('mouseout', function(event) {
  $(this).find('.delButton').hide();
}); 
分享给朋友:
您可能感兴趣的文章:
随机阅读: