CODEWITHSUNDEEP
htmljquery
user7959365
user7959365

Reputation:

target this childs spesific parent sibling

Found this question which takes me about as far I was able to get on my own. However in my case I got multiple element with the same class and It currently selects all of them, can I somehow point it to the only one hovered on?

$(function(){
    $('.hover').live('mouseover', function(){
       $(this).parent().siblings('.target').css('color','red');
    }); 
    $('.hover').live('mouseout', function(){
       $(this).parent().siblings('.target').css('color','black');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
    <a class="hover">Hover</a>
</div>

Upvotes: 0

Views: 27

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

Use .prev instead of .siblings to get to just the one previous element:

$('.hover').hover(
  function() {
    $(this).parent().prev().css('color', 'red');
  },
  function() {
    $(this).parent().prev().css('color', 'black');
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

<div class="target">target</div>
<div>
  <a class="hover">Hover</a>
</div>

(if you want the next element instead, use .next())

Upvotes: 1

Related Questions