Задайте конкретный div при зависании над другим

Question

Я пытаюсь навести курсор на один div и заставить его не только запускать hoverstate для div, на котором я курсирую, но также и в другом месте на странице. Как я могу это сделать. Использование JavaScript или JQuery будет в порядке. Вот то, что мой код выглядит следующим образом:

<div class="wrapper"> 
       <div class="col-left-3"> 
       <a href="http://example.com"> 
         <div class="details-wrap"> 
          <h3>Title</h3> 
          <p>Description</p> 
         </div> 
       </a> 
       </div> 

       <div class="col-left-3"> 
       <a href="http://example.com"> 
         <div class="details-wrap"> 
          <h3>Title</h3> 
          <p>Description</p> 
         </div> 
       </a> 
       </div> 

       <div class="col-left-3"> 
       <a href="http://example.com"> 
         <div class="details-wrap"> 
          <h3>Title</h3> 
          <p>Description</p> 
         </div> 
       </a> 
       </div> 


       <div class="full-width-col"> 
       <a href="http://example.com"> 
         <div class="bottom-details-wrap"> 
          <h3>Title</h3> 
          <p>Description</p> 
          <div class="full-width-column-container"> 

           <div class="col-left-3-res"> 
            <h3>Col 1 title</h3> 
            <ul> 
             <li>List Item</li> 

             <li>List Item</li> 
            </ul> 
           </div> 

           <div class="col-left-3-res"> 
            <h3>Col 2 title</h3> 
            <ul> 
             <li>List Item</li> 

             <li>List Item</li> 
            </ul> 
           </div> 

           <div class="col-left-3-res"> 
            <h3>Col 3 title</h3> 
            <ul> 
             <li>List Item</li> 

             <li>List Item</li> 
            </ul> 
           </div> 


          </div> 
         </div> 
       </a> 
       </div> 
       </div> 

Я ищу опрокидывание в DIV с классом «детали-оберткой» и вызвать hoverstate на DIV с классом «снизу детальной-обертывание». Как вы можете видеть, они находятся внутри других div, поэтому я думаю, что мне нужно настроить таргетинг, используя Javascript, а не только CSS. Но я не знаю, как это сделать. Любая помощь будет полезна.

Answer 1

Вы можете использовать функцию .hover() в jQuery.

JSFIDDLE

$('element').hover(function() { 
 
     //do what you want to elements here. 
 
    } 
 
);

Answer 2

В JQuery, если применить метод .hover() к $('.details-wrap') вы можете добавить функцию, которая применяет эффекты к $('.bottom-details-wrap'):

$(document).ready(function(){ 

    $('.details-wrap').hover(function(){ 
     $('.bottom-details-wrap') [...rest of function here...] 
    }); 

});