CODEWITHSUNDEEP
javascriptjquerymenubackgroundhover
user3496789
user3496789

Reputation: 3

Change backgroundcolor of div when class of list item is hover

my website has a horizontal main menu. This menu has a submenu for each menu item. When an item of the submenu is hovered the class of that item gets 'hover' added. When hover is added I want the background color of div (class 'part2') to change.

Site: europebathroom.com

See the code below. In this case I have hovered item4 and then subitem2 which gets 'hover' added when you hover the item.

CODE

<ul class="dj-main">             //main menu
  <li class="item1">...</li>     //main menu items
  <li class="item2">...</li>
  <li class="item3">...</li>
  <li class="item4">

    <div class="submenu">        //dropdown div

      <div class="part1">                       //first half containing submenu
        <ul class="dj-submenu">                 //submenu
          <li class="subitem1">...</li>         //submenu items
          <li class="subitem2 hover">...</li>   //hovered submenu item
        </ul>
      </div>

      // id = part2 added because of the script below
      <div class="part2" id="part2">...</div>     //second half containing color

    </div>
  </li>
</ul>

Currently div class = part2 has no backgroundcolor. When hovering subitem2 (when its class = subitem2 hover) the background color must change. I've tried the script below.

JAVASCRIPT

$('ul.dj-submenu li').each(function(){
    if $(this).hasClass('subitem2 hover'){
        document.getElementById('part2').style.backgroundColor = '#a5a5a5';
    }
});

Upvotes: 0

Views: 450

Answers (3)

TriniBoy
TriniBoy

Reputation: 690

You can try this

Having re-read your question, I've adjusted the code a bit. Try this

$('.subitem2').hover(function(){
    if($(this).hasClass('hover')){
        $('.part2').css('background-color','#a5a5a5');
    }
});

Upvotes: 1

Sserpyc
Sserpyc

Reputation: 15

How about this:

HTML:

<ul class="dj-main">             //main menu
  <li class="item1">...</li>     //main menu items
  <li class="item2">...</li>
  <li class="item3">...</li>
  <li class="item4">

    <div class="submenu">        //dropdown div

      <div class="part1">                       //first half containing submenu
        <ul class="dj-submenu">                 //submenu
          <li class="subitem1" data-id="1">...</li>         //submenu items
          <li class="subitem2 hover" data-id="2">...</li>   //hovered submenu item
        </ul>
      </div>

      // id = part2 added because of the script below
      <div class="part2" id="part2">...</div>     //second half containing color

    </div>
  </li>
</ul>

Javascript:

$('ul.dj-submenu li').each(function(){
var $this = $(this);
    if ($this.hasClass('hover')) {
        $('#part' + $this.data('id')).css('background-color','#a5a5a5');
    }
});

Should do the trick and works with all menu items. If the color is not dynamic i would prefer a pure CSS solution.

Upvotes: 0

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 292

You can do it with css only :

ul.dj-submenu >li:hover {
   background:#a5a5a5;
}

Upvotes: 0

Related Questions