Inline .css versus addClass / removeClass

The following .css code works great, but the add/removeClass option does not!

???


/* GREAT HERE: */

$("#menubar1>li").hover (
	function() {
		$("#menubar").css({
			"overflow-y":  "visible",
			"overflow-x":  "visible"			
		});
	},
	function() {
		$("#menubar").css({
			"overflow-y":  "hidden",
			"overflow-x":  "auto"			
		});
	}
);

/* BUT NOT HERE: */

$("#menubar>li").hover (
	function() {
		$('#menubar')
			.removeClass('showScrollbar')
			.addClass('hideScrollbar');
	},
	function() {
		$('#menubar')
			.removeClass('hideScrollbar')
			.addClass('showScrollbar');
	}
);

/* HERE ARE THE CLASSES: */

.hideScrollbar {
	overflow-y:  visible;
	overflow-x:  visible;
}

.showScrollbar {
	overflow-y: hidden;
	overflow-x: auto;
}

I don’t see a typo … ???

I think I see a confusion of the show and hide css classes.

I found my typo, AKA a very stupid error - sorry to be a bother!

Please tell if it was in the posted code. :blush:

1 Like

If this is related to your other thread then removing the overflow on hover is of no use to you at all as already explained.

There is no ‘use case’ that I can imagine where removing overflow on hover is ever going to be useful. You either need the overflow or you don’t.

Sorry to labor the point but I think you are misunderstanding the problem entirely.

1 Like

Yes

Add white-space: nowrap to each hide/show class and the addClass/removeClass work great.

No further conversation from me until I am totally done and tested.

1 Like