Changing CSS "Display" Property Using jQuery

Hey Guys,

I have a dive with the ID #header_cart. Right now the div has the style

display:none

Code (markup):

I wrote this simple jQuery code to change the CSS

<script type="text/javascript">
jQuery(function(){
    jQuery('#header_cart').mouseenter(function(){
        jQuery(this).css('display', 'block');
    });
});
</script>

Code (markup):

Does anyone have any ideas why it might not be working?

 

Never mind, I have found the solution. I was targeting the wrong div in the function.

 

My question would be if your trigger is 'mouseenter' -- basically a hover...

WHAT THE **** ARE YOU USING JQUERY FOR?!?

That's CSS' job. Of course, display:none also means that many screen readers won't actually allow access to whatever's in that DIV...

Though to be fair I say that every time somebody used jQuery for... well.... ANYTHING.

Of course, IF you REALLY wanted to do that with JS, that jQuery saved you SO much code...

var target=document.getElementById('header_cart');
target.onmouseover=function(e) {
	e=e | window.event;
	var t=e.target | e.srcElement;
	t.style.display='block';
}

Code (markup):

NOT.

 

I am using it so that when a customer hovers over our websites cart icon, a drop-down menu appears with their products. I already have the div in place that handles the products and such, but for some reason I could not get the code to work.

Here is what I ended up using:

jQuery(function(){
    jQuery('#header_cart').mouseenter(function(){
        jQuery('.block-content').fadeIn( 600, function() {
            jQuery('.block-content').css('display', 'block');
        });
    });
    jQuery('#header_cart').mouseleave(function(){
        jQuery('.block-content').fadeOut( 600, function() {
            jQuery('.block-content').css('display', 'none');
        });
    });
});

Code (markup):

 

That's REALLY javascript for NOTHING... since that's CSS' job, and a hell of a lot less CSS at that.

#header_cart .block-content {
  display:none;
}

#header_cart:hover .block-content {
  display:block;
}

Code (markup):

Assuming .block-content is inside #header_cart (which would make the most sense). You want a fade effect, that's what CSS3 transitions are for. (No animations IE8-, OH WELL!)...

... and using scripting, targeting a element by class is usually a REALLY BAD IDEA. (slow as molasses in February).

Though in either case it's garbage accessibility since it's 100% mouse reliant and likely ignored by screen readers... but that's typical of the piles 99% of people walking through that fat bloated idiotic BS known as jquery end up tracking all over the carpets when they forget to take their boots off. (feel the love)