Inline .css versus addClass / removeClass

HTML & CSS
1

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 … ???

2

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

3

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

4

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

1 Like
5

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
6

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
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.