使用jQuery選擇子元素

Question

我有三個帶有圖像的框，當將它們懸停在父元素上時，它們將試圖顯示。 但是我只希望顯示懸停在上面的父圖像。 這是我的代碼；

 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

您可以使用.children（）函數：

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

這將選擇具有類plus的懸停.job_col的子級。

Answer 2

作為替代解決方案：

您不需要jQuery即可將元素懸停在父元素上時顯示。 您可以為此使用CSS！

 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

使用find（）或children（） ，在這種情況下都有效：

 $(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

嘗試使用find()函數

 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

檢查以下代碼，可能對您有幫助

 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>