Change Background Image with CSS using div.selected

Hi,

I have a menu (based on a menu from Dynamic Drive) where the background image of each menu item changes when the mouse hovers over it.  The problem I'm having is there are two types of menu items (with flyout and without flyout).  I have it working for the with flyout menu, but can't get the without flyout to work because there are multiple div styles applied.   I think I need to have 2 entries in the css: one for "with flyout selected" and one for "without flyout selected", but I can't figure out how to do it.

I've put a sample on JSFiddle here: https://jsfiddle.net/sjsimpson2000/gq71mpee/5/

Thanks!
sjsimpson2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
A quick solution could be that:
Create another class for selected menu item not having any child, something like selectednoflyout.
#cpleftnav div.selected { background-color: #fff !important; background: url('http://s6.postimg.org/iumwk0199/tab_active.png') no-repeat center center; } #cpleftnav div.selectednoflyout { background-color: #fff !important; background: url('http://s6.postimg.org/9o4lwpw0t/tab_active2.png') no-repeat center center; }
Use that selectednoflyout instead of selected for menu items which have class cptabnoflyout
$items.hover( function () { $items.removeClass('selected').removeClass('selectednoflyout'); $(this).addClass($(this).hasClass('cptabnoflyout') ? 'selectednoflyout' : 'selected'); var index = $items.index($(this)); $('#cpleftnavflyouts>div').hide().eq(index).show(); }, function () { //alert("Mouse Out"); $items.removeClass('selected').removeClass('selectednoflyout'); //$(this).addClass('selected'); var index = $items.index($(this)); $('#cpleftnavflyouts>div').hide(); });

An update from your jsfiddle could be found here: https://jsfiddle.net/gq71mpee/8/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sjsimpson2000Author Commented:
PERFECT!  Thank you!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.