Selecting a child element with jQuery

Question

I have three boxes with an image in each which I am trying to display when hovering over the parent element. But I only want the image for the parent which is being hovered over to appear. Here's my code;

 jQuery(".job_col").hover(function() { var current = jQuery(this); jQuery(current > ".plus").addClass("hi"); }, function() { }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fixed_jobs_fluid"> <div class="container"> <div id="fixed_jobs_cont"> <div class="job_col"> <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col" id="border"> <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2> <p class="f_salary">Salary: £40,000 – £45,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col"> <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> </div> </div> </div> 

Answer 1

You can use the .children() -function:

jQuery(".job_col").hover(function(){
    var current = jQuery(this);
    current.children(".plus").addClass("hi");
    }, function(){
});

This selects the children of the hovered .job_col , that has the class plus .

Answer 2

As an alternative solution:

You don't need jQuery to make elements appear when the parent is hovered. You can just use CSS for this!

 img { display: none; } .job_col:hover img { display: block; } .job_col { float:left; width: 33% } 

 <div class="container"> <div id="fixed_jobs_cont"> <div class="job_col"> <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="http://via.placeholder.com/200x150" alt=""> </div> <div class="job_col" id="border"> <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2> <p class="f_salary">Salary: £40,000 – £45,000</p> <img class="plus" src="http://via.placeholder.com/200x150" alt=""> </div> <div class="job_col"> <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="http://via.placeholder.com/200x150" alt=""> </div> </div> </div> 

Answer 3

 jQuery(".job_col").hover(function(){ var current = jQuery(this); current.find(".plus").addClass("hi"); }, function(){ }); 

Answer 4

Use find() or children() , both are valid in this case:

 $(document).ready(function(){ $(".job_col").hover(function(){ $(this).find(".plus").addClass("hi"); }, function(){ $(this).find(".plus").removeClass("hi"); }); }); 

 .plus{ height: 50px; width: 50px; } .hi{ height: 100px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="fixed_jobs_fluid"> <div class="container"> <div id="fixed_jobs_cont"> <div class="job_col"> <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt=""> </div> <div class="job_col" id="border"> <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2> <p class="f_salary">Salary: £40,000 – £45,000</p> <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt=""> </div> <div class="job_col"> <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt=""> </div> </div> </div> </div> 

Answer 5

Try with find() function

 jQuery(document).ready(function(){ jQuery(".job_col").hover(function(){ var current = jQuery(this); current.find(".plus").addClass("hi"); }, function(){ var current = jQuery(this); current.find(".plus").removeClass("hi"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="fixed_jobs_fluid"> <div class="container"> <div id="fixed_jobs_cont"> <div class="job_col"> <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col" id="border"> <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2> <p class="f_salary">Salary: £40,000 – £45,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col"> <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> </div> </div> </div> 

Answer 6

 jQuery(".job_col").hover(function() { var current = jQuery(this); current.find(".plus").addClass("hi"); }, function() { }); 

 .hi { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fixed_jobs_fluid"> <div class="container"> <div id="fixed_jobs_cont"> <div class="job_col"> <h2 class="f_job_title">Construction Site <br class="fixed_br">Supervisor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col" id="border"> <h2 class="f_job_title">Construction Contracts <br class="fixed_br">Manager role</h2> <p class="f_salary">Salary: £40,000 – £45,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> <div class="job_col"> <h2 class="f_job_title">Graduate Quantity <br class="fixed_br">Surveyor role</h2> <p class="f_salary">Salary: £20,000 – £22,000</p> <img class="plus" src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt=""> </div> </div> </div> </div> 

Answer 7

check the following code, might be helpful to you

 var x=0; $('a').click(function() { if(x==0){ $(this).parent().find('img').css('visibility','hidden'); x=1; } else{$(this).parent().find('img').css('visibility','visible'); x=0; } }); 

 .plus{ visibility:hidden; } a:hover{cursor:pointer; user-select: none; }div{float:left;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="job_col"> <a >clik here 1</a> <img class="plus" src="http://iconbug.com/data/f6/128/942491bc40fa4b67a950d03d3d2f6399.png" alt=""> </div> <div class="job_col" id="border"> <a>clik here 2</a> <img class="plus" src="http://clipart.info/images/minicovers/1496184671Wads-of-Dollars-Transparent-PNG-Clip-Art-Image.png" alt=""> </div> <div class="job_col"> <a>clik here 3</a> <img class="plus" src="http://clipart.info/images/minicovers/1496184667100-Euro-PNG-Clipart.png" alt=""> </div>