Show and hide DIV using CSS or Javascript?

Question

I just saw a demo in which this jquery code was displayed and hiding the dive on hover, could it only be done with regualr css? And if you can do it with css, do you have an advantage in that with javascript?

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

Answer 1

CSS hover works great with anchor tags, but IE6 doesn't recognize hover events on things like li tags.

If you used snapping, you could achieve the same effect in CSS:

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

Answer 2

CSS, IE6 hover (A), .

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

I am dynamically creating something like this on the server side. I am sure there is a more efficient / more beautiful way, but this usually serves my needs. Basically hides the entire div and hides the one that should be displayed (passed as the arg function from the onClick event).

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';
}