Choosing a specific child element using jQuery

When hovering over a parent element, I want to display an image within that specific parent only. Here is my current code snippet:

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>

javascriptjqueryhtmlcss

Answer №1

Here's another approach to consider:

You can achieve the effect of making elements appear on hover without relying on jQuery by using CSS alone!

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 №2

If you want to interact with the children elements of an element on hover, you can achieve this using the .children() method in jQuery:

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

This code snippet will apply a class 'highlighted' to the children elements with the class 'plus' when hovering over an element with the class 'job_col'.

Answer №3

When the mouse hovers over a element with the class "job_col", jQuery adds a class of "hi" to the child element with the class "plus".

Answer №4

To achieve the desired effect, you can use either find() or children(). Both methods are suitable for this scenario:

$(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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d6c7c7dbd29ac3d8c2d4df9aded4d8d9f78599c7d9d0">[email protected]</a>?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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3d2d2cec78fd6cdd7c1ca8fcbc1cdcce2908cd2ccc5">[email protected]</a>?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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7c6c6dad39bc2d9c3d5de9bdfd5d9d8f68498c6d8d1">[email protected]</a>?v=73d79a89bded" alt="">
                </div>
            </div>
        </div>
    </div>

Answer №5

Give it a shot using the 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">Manager 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">Commercial Project <br class="fixed_br">Coordinator 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">Junior Architectural <br class="fixed_br">Designer 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

Take a look at this code snippet, it might be of help 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Insert the user's choice as a MenuItem within the Select component

I currently have a default list of options for the user. However, I want to allow users to add their own category dynamically. This will trigger a dialog box to appear. How can I modify my code so that the value property starts from number 4? Take a look ...

javascriptreactjsmaterial-ui

What could be causing my web application to not properly identify angular.js?

As a newcomer to angular, I have been struggling to incorporate it into my web application (VS) as I keep encountering issues with recognizing angular. Despite trying various methods, the result remains the same - angular is not being recognized. I dow ...

javascriptangularjsweb-applications

Using Q to conduct polling asynchronously with promises

I am facing a situation similar to the one discussed in this blog post: Polling with promises. The author explains using promises for polling until a JobID is returned. I intend to implement this using Q. I want to chain promises together but my attempts ...

javascriptpromiseq

unveiling the comparison between the revealing module and object literal patterns in encapsulating code

When developing a new feature, my typical approach is to create a separate component for each one. For example, if I have a feature called abc, I would write the following JavaScript: var AbcComponent = (function(){} var initialize = function(){ }, ...

javascriptjquerynode.jsoopdesign-patterns

Tips for displaying JSON data within another array in a Bootstrap table

I'm working with the following JSON data that I need to display in a bootstrap table. I can easily display the single-level data, but I'm unsure how to display array within array data in the bootstrap table. [ { "seriesName": "Indian ...

javascriptangularjsbootstrap-4

Transferring pictures between folders

I am currently developing an Angular app that involves working with two images: X.png and Y.png. My goal is to copy these images from the assets folder to a specific location on the C drive (c:\users\images) whose path is received as a variable. ...

javascriptangularangular6angular7angular8

Angular 5: Using Await But Not Actually Waiting

Upon executing the provided code, I noticed that the checkCard function is being triggered before the getTimecard function completes its execution. getTimecard() { this._service.getTimecard().subscribe( data => { this.sending = true; this.t ...

javascripttypescriptasync-awaitangular5

Alternating Text Color jQuery Sequencing

I'm having trouble deciding on the most effective approach to achieve this task. My goal is to animate the color change of a div's text in a specific sequence (e.g., #000, #eee, #fff...) every 1.5 seconds. From my research, I gather that I will ...

javascriptjquerycss

What is the safest way to convert a local file path to a file:// URL in Node.js?

In my node.js application, I am faced with the task of converting local file paths into file:// urls. After some research, I came across the File URI scheme on Wikipedia and I believe that there must be a solution out there or perhaps even an npm module t ...

javascriptnode.jsurlnpm

Tips for sending data to child components in React.js

Currently, I am developing a project utilizing React JS. My goal is to pass a props to an array. Below is the Component code: import React, { Component } from 'react'; import { Link } from 'react-router-dom'; class TaskItem extends Com ...

javascriptarraysreactjscomponents

What is the process of applying arguments to a class constructor automatically?

In my code, there is an ES6 class called User and a global function named map(): class User { constructor(public name: string) {} } const map = <T, R>(project: (value: T) => R) => {} Instead of the usual way of calling map like this: map ...

javascripttypescriptecmascript-6

Tips for centering a resized image within a container:

I adjusted the width and height to "max" for my images inside the container, and while wider images fit perfectly, taller ones seem to shift left of the container. I tried researching about adjusting using "max-width" but still facing issues. Here's t ...

javascripthtmlcss

There is a property name missing before the colon in the "(property) : (value)" declaration for a CSS global variable

I have been trying to create a global variable in CSS by following the suggestions I found online. According to various sources, including this article, the correct way to declare a CSS variable is as follows: :root{ --variableName:property; } However, ...

cssasp.net

Utilize specific Angular JS methods just a single time

In my Angular application, I have the following architecture: Index Page -> Shell Page -> User view (User can open subview from here) Every route change in my application goes through the Shell page. There is a function on the Shell page called act ...

javascriptangularjsangularjs-ng-route

Shorten the text in a flex container using ellipsis and flex-grow

I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...

htmlcssflexboxellipsis

What is the best way to display multiple modals in a React app?

I am facing a challenge where I need to render multiple modals based on the number of items in the 'audios' property of an object. Currently, I am using the mui modal library for this functionality. Here are the variables being utilized: const ...

javascriptreactjsmaterial-uimodal-dialog

"Encountering issues with the callback function not being returned in node

Currently, I am leveraging the node AMQP module to establish a connection with RabbitMQ. The process includes successfully connecting, setting up an exchange, queue, and sending messages to the exchange, which can be verified on the management console. Ho ...

javascriptnode.jsrabbitmqamqpnode-amqp

Error Encountered When Running JavaScript Code

Running the code on my Localhost:3000 is resulting in an error message: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'id') The specific section of the code causing this error is highlighted in the Source part: ...

javascriptreactjsnext.jsundefinedtypeerror

What is the best way to transfer a PHP variable to another page using a hidden form input with the POST method?

Welcome to Page 2 $var= $_GET['var']; $id= $_GET['id']; echo "Book Title:<br>" .$var. "<br> Book id:".$id."<br>"; $result = mysqli_query($con,"SELECT * FROM books WHERE bookid='$id'"); ...

phphtml

Update the text for the filter search placeholder in the Ant Table component

Is there a way to alter the default placeholder text in the Ant Table? I've set up a functioning example in documentation but couldn't find any prop for customization besides the customized filter dropdown, which I didn't want to implement. ...

javascriptreactjsantd