жить() MouseEnter/парить

Question

$('.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> 

То, что я хотел бы сделать:

При наведении сообщение (элемент WallEntry) , должен появиться delButton. Когда вы уходите, он должен спрятаться.

Я пробовал:

$(".WallEntry").live("hover", function(){ 
$(this).find('.delButton').css('visibility', 'visible'); 
}, function() { 
$(this).find('.delButton').css('visibility', 'hidden'); 
}); 

Но потом мне сказали, что жить() оленья кожа обрабатывать две функции.

Мой код в верхнем случае состоит в том, что он не показывает delButton над добавленными элементами div с помощью WallEntry.

Как это сделать?

Answer 1

Я предлагаю, если вам не нужно поддерживать IE6, удаляя все ваши сценарии для висения и просто делать это в CSS:

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

---

Если есть для поддержки IE6, использовать этот CSS:

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

И этот сценарий:

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

Или, чтобы быть полностью безопасным:

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

И если родительский контейнер имеет идентификатор, .delegate() версия:

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

Answer 2

Может быть не ваша проблема, но не могли бы вы просто сделать:

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

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

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

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

} 

Answer 3

, что случилось с этим?

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

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

---

Я хотел бы предложить, если вы использовали display:none; вместо visibility:hidden;

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

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