активировать элементы отдельно при зависании

Question

Три элемента необходимо активировать при наведении курсора. Эти элементы также используются в разных div и используют одни и те же элементы и классы. Для этого я использую JavaScript.

Проблема заключается в зависании над div 1, он также активирует div 2 и 3. Вероятно, потому что они имеют одни и те же элементы.

Как я могу активировать их индивидуально при наведении курсора?

$(function() { 
 
    $(".link") 
 
    .hover(
 

 
     function() { 
 
     $(".link").css('color', 'red', 'text-decoration', 'none'); 
 
     $(".box").css('border-bottom', '4px solid #183c94'); 
 
     $("span").css('opacity', '1'); 
 
     }, 
 

 
     function() { 
 
     $("link").css('color', '#000000'); 
 
     $(".box").css('border-bottom', '4px solid #cfcfcf'); 
 
     $("span").css('opacity', '0'); 
 
     }); 
 
    
 
});

.box { 
 
    width: 300px; 
 
    height: 30px; 
 
    background: #f1f1f1; 
 
    text-align: center; 
 
} 
 
span { 
 
    height: 10px widtth: 10px; 
 
    background: #c3c3c3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <h4><a class="link" href="#">hover</a><span>+</span></h4> 
 
</div> 
 
<div class="box"> 
 
    <h4><a class="link" href="#">hover</a><span>+</span></h4> 
 
</div> 
 
<div class="box"> 
 
    <h4><a class="link" href="#">hover</a><span>+</span></h4> 
 
</div>

Посмотреть на JSFiddle.

Answer 1

Вы должны использовать this "найти" элементы:

$(function() { 
    $(".link") 
    .hover(
     function() { 
      $(this).css('color', 'red', 'text-decoration', 'none'); 
      $(this).closest(".box").css('border-bottom', '4px solid #183c94'); 
      $(this).next("span").css('opacity', '1'); 
     }, 

     function() { 
      $(this).css('color', '#000000'); 
      $(this).closest(".box").css('border-bottom', '4px solid #cfcfcf'); 
      $(this).next("span").css('opacity', '0'); 
     }); 
}); 

DEMO

Также в CSS:

span { 
    height: 10px widtth: 10px; 
    background: #c3c3c3; 
} 

Должно быть:

span { 
    height:10px; width:10px; 
    background: #c3c3c3; 
} 

Answer 2

Используйте JQuery $ (это) слова ключа

$(function() { 
    $(".link").hover(function() { 
     $(this).css('color', 'red', 'text-decoration', 'none'); 
     $(".box").css('border-bottom', '4px solid #183c94'); 
     $("span").css('opacity', '1'); 
}, 

function() { 
    $(this).css('color', '#000000'); 
    $(".box").css('border-bottom', '4px solid #cfcfcf'); 
    $("span").css('opacity', '0'); 
    }); 
}); 

Я обновил свою скрипку я не знаю, как вы справляетесь коробки или пролетными элементы на парении.