Показать и скрыть DIV с помощью CSS или Javascript?

Question

Я только что видел демо, в котором был этот код jquery, чтобы показать и скрыть погружение при наведении курсора, не может ли это быть сделано только с regualr css? И если вы можете сделать это с помощью css, есть ли какое-либо преимущество в этом с помощью javascript?

$('.comment').hover(function() { 
    $(this).children('.delete').show(); 
}, function() { 
    $(this).children('.delete').hide(); 
}); 

Answer 1

CSS hover отлично работает с привязными тегами, но IE6 не распознает события наведения на такие вещи, как теги li.

Если вы использовали якорь тег, однако, вы могли бы добиться того же эффекта в CSS:

a.comment  .delete { display: none; } 
a.comment:hover .delete { display: block; } 

Answer 2

Вы можете сделать это с помощью CSS, но IE6 поддерживает только: парить псевдо-класс на якорных тегов (А), так что это не так часто.

Answer 3

Джоди является правильным. Проверьте документы для свойства CSS Display.

Answer 4

Существует больше функциональных возможностей, которые сделает .hover. Если вы предоставляете более двух функций, он будет выполнять все функции. Пример

$('.comment').hover(
    function(){$(this).children('.delete.first').show()}, 
    function(){$(this).children('.delete.first').hide()}, 
    function(){$(this).children('.delete.second').show()}, 
    function(){$(this).children('.delete.second').hide()} 
    ); 

Это покажет один набор детей в первый раз, они парят, то скрыть, и в следующий раз показать другой набор детей.

Функция парения также работает над несколькими элементами, и только пожары, если мышь оставил все элементы (не только тогда, когда она покидает один и переходит к другому)

Answer 5

я динамически создать что-то вроде этого на стороне сервера , Я уверен, что есть более эффективный/более красивый способ, но это обычно служит моим потребностям. В основном скрывает все div и скрывает ту, которая должна отображаться (передается как функция arg из события onClick).

function toggleTab(id) 
{ 
    document.getElementById('divEnrollment').style.display='none';  
    document.getElementById('divSearch').style.display='none'; 
    document.getElementById('divMeeting').style.display='none'; 
    document.getElementById('divBenefit').style.display='none'; 
    document.getElementById('div' + id).style.display='block'; 

    document.getElementById('spnEnrollment').style.color='blue';  
    document.getElementById('spnSearch').style.color='blue'; 
    document.getElementById('spnMeeting').style.color='blue'; 
    document.getElementById('spnBenefit').style.color='blue'; 
    document.getElementById('spn'+id).style.color = 'red'; 
}