There is a div in which the list, it is necessary that when you hover over a list item, the style of the div changes with the class block.

<div class="block"> <div> <ul > <li class="list"></li> <li class="list"></li> </ul> </div> </div>

Thank you in advance.

  • $ ('. list'). on ('mouseenter', function (e) {$ (this) .closest ('. block'). css ('background', 'red');}); - Ivan Frolov

3 answers 3

You can set a handler on the elements of the list and, when you hover the cursor, look for the closest parent element corresponding to the specified selector ( in your case, the class "block" )

 function closest(el, sel) { if (el !== null) { return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel)); } } function toggleBg(e) { var parentBlock = closest(this, '.block'); parentBlock.style.backgroundColor = e.type === 'mouseenter' ? '#ff0' : ''; } [].forEach.call(document.querySelectorAll('.list'), function(li) { li.addEventListener('mouseenter', toggleBg, false); li.addEventListener('mouseleave', toggleBg, false); }); 
 <div class="block"> <div> <ul> <li class="list">Item 1</li> <li class="list">Item 2</li> </ul> </div> </div>

And you can go from the reverse. That is, set the handler on the parent element, which we will "repaint" the background color and check on which element the event worked. If this element contains the class "list", then change the background color.

 function toggleBg(e) { if (!e.target.classList.contains('list')) { return false; } this.style.backgroundColor = e.type === 'mouseover' ? '#ff0' : ''; } [].forEach.call(document.querySelectorAll('.block'), function(el) { el.addEventListener('mouseover', toggleBg, false); el.addEventListener('mouseout', toggleBg, false); }); 
 <div class="block"> <div> <ul> <li class="list">Item 1</li> <li class="list">Item 2</li> </ul> </div> </div>

  • Thank you very much for your time - DaVinchi
  • Be sure to note the best answer when I try both) - DaVinchi

If you are using jQuery, you can do this:

 var block = $('.block'); // делегировать обработку события на родительский контейнер block // курсор на элементе с классом list .on('mouseover', '.list', function(){ // какие-то действия с элементом .block, например добавление второго класса block.addClass('over'); }) // уход курсора с элемента с классом list .on('mouseleave', '.list', function(){ block.removeClass('over'); });
  • Thank you for your attention. - DaVinchi
  • Be sure to note the best answer when I try both) - DaVinchi

Another option with jQuery.

 $("#block li").hover(function(){ $("#block").addClass('hover'); }, function(){ $("#block").removeClass('hover'); }); 
 .block { color: #fff; background: #F00; } .block.hover { background: #000; } .block ul { padding: 0; margin: 0; } .block .list { background: blue; list-style: none; padding: 20px; margin-bottom: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="block" class="block"> <div> <ul> <li class="list">Hello</li> <li class="list">World!</li> </ul> </div> </div>