Manipulate Elements with jQuery: Adding a Class to a Child Element

HTML:

<div class="cell-container">
  <img src="image.png" class="thumbnail" />
</div>

CSS:

.hover {
  background-color: silver;
}
.hover-image {
  border: 1px solid #000;
}

jQuery:

$(".cell-container").mouseover(function() {
    $(this).addClass("hover");
});

$(".cell-container").mouseout(function() {
    $(this).removeClass("hover");
});

To achieve a highlighted background onmouseover for the cell-container div and add a border to the image inside, you can use the provided CSS and jQuery code.

jqueryhtmlcss

Answer №1

Have you considered accomplishing this with CSS?

div.cell-container:hover {
  background-color: silver;
}

div.cell-container:hover img.thumbnail {
  border: 1px solid #000;
}

Answer №2

By the way, $.hover allows for both mouseover and mouseout events.

$(".cell-container").hover(function() {
    $(this).addClass("hover");
    $(this).children('img').addClass('hover-image');
}, function() {
    $(this).removeClass("hover");
    $(this).children('img').removeClass('hover-image');
});

Answer №3

VIEW DEMO

$(".cell-container").mouseenter(function() {
    $(this).addClass("hover").find('img').addClass('hover-image');
});

$(".cell-container").mouseleave(function() {
    $(this).removeClass("hover").find('img').removeClass('hover-image');
});

Make sure to update your CSS as well:

.hover-image {
  border: 1px solid #000;
}

Answer №4

$(".cell-container").mouseover(function(){ // using mouseover for succinct syntax
    $(this)
        .addClass("hover") // add hover class on mouseover
        .find("img") // select the child image
            .addClass("hover-image"); // add hover class
}).mouseout(function(){ // mouseout function
    $(this)
        .removeClass("hover") // remove hover class
        .find("img") // select the child image again
            .removeClass("hover-image"); // remove hover class
});

Learn more about mouseover() here.

Answer №5

How about this approach:

.hover-effects:hover
{
  background-color: silver;
}

.hover-effects:hover img
{
  border: 1px solid #000;
}

This is a pure CSS solution.

Before adding extra classes for styling, always check if the desired effect can be achieved using CSS alone (it often can).

Answer №6

$(".cell-container").mouseover(
  function () {
    $(this).addClass("hover-effect");
    $(this).children("img").addClass("image-hover");
  }, 
  function () {
    $(this).removeClass("hover-effect");
    $(this).children("img").removeClass("image-hover");
  }
);



.hover-image {
  border: 1px solid #000;
}

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

Is it possible to save image URLs in a MySQL database and have a PHP page retrieve and

Is it possible to store image URLs in a database with unique numeric IDs and have a PHP page retrieve the data from the database to display the image on a webpage? For example, I would like to store an image URL such as http://www.example.com/images/image ...

phphtmlmysqlimage

Prolong the Slide Duration in Slider Pro Slideshow

I am currently utilizing Slider Pro from bqworks.com for a slideshow with automated cycling on my website. I would like to adjust the display duration of each image in the slideshow. The documentation mentions a property called "slideAnimationDuration," wh ...

javascriptjqueryhtmlcssslider

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...

javascriptjqueryhtmljson

jQuery plugin that controls scrolling speed using the mousewheel

I am trying to replicate the header design of Google+ which includes a search bar that moves when scrolling. Specifically, when the user scrolls down, the search bar shifts to top:-60px and the second horizontal menu shifts from top:60px to top:0 becoming ...

javascriptjqueryscrollmousewheel

Enhance User Experience: Revise Custom Fields Post Checkout Validation Error in WooCommerce

For my current project, I am making some customizations to the WooCommerce features. Specifically, I have set up two "shipping methods": 1. delivery 2. take away In addition, I have included a custom field on the checkout page which is a <select& ...

phpjqueryajaxwordpresswoocommerce

Is it necessary to use block elements when specifying image dimensions in HTML?

I have encountered a unique scenario where I want to set a pre-determined height for an HTML img element before it finishes loading. This is crucial because this height will be utilized in a calculation that may occur before the image is completely loaded, ...

htmlcss

Ways to improve performance when loading multiple $.ajax({...}) functions in Asp.net?

In my ASP.NET web application, I am calling multiple functions on page load. All functions are run on the page ready method. See the code snippet below: $(document).ready(function(){ func1(); func2(); func3(); //.... and so on. } ...

c#jqueryasp.netweb-services

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss

Transmitting JSON data to PHP for retrieval

( [addF] => stdClass Object ( [0] => stdClass Object ( [productID] => 33 [fQty] => 11 [fPW] => 11 [fP] => [fH] => PVC ...

phpjqueryjson

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

Utilize Jquery to transform 3 arrays into separate objects distinguished by unique IDs

Recently, I've been experimenting with a very simplistic jquery admin area menu. My goal is to have jQuery create 3 identical menus with different IDs. I was able to accomplish this by creating a function and calling it three times with various variab ...

javascriptjqueryarrays

Saving user input as a variable and sending it to the server using ajax and javascript

Seeking a way to save 'gender' and 'age' input as variables and then submit them to the server using ajax. In my attempt, when checking the console output, the gender variable was successfully saved while the age variable did not work a ...

javascriptjqueryajaxsaving-data

Remove the content located beside an input element

Seeking assistance for a straightforward query: Snippet of code: <span> <input id="elemento_20_1" name="elemento_20_1" class="elemento text" size="2" maxlength="2" value="" type="text"> / <label for="elemento_20_1">DD</label> < ...

javascriptjqueryhtmljquery-selectors

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

javascriptjqueryhtmlcss

Retrieve data from XML file using ThickBox

How can I dynamically load content from an XML file into a DIV when a user clicks on specific links? I was successful in loading the correct content by matching arguments passed through a function invoked onClick. Now, I am attempting to display this conte ...

jquery

Clicking, every iteration, and these challenges

Struggling to find a solution for this issue, as it's quite tricky to search for. Here is the scenario: There is an onclick function: $(".div-colour-box").on("click", function () { This function goes into an each loop: $("#" + componentID).childre ...

jqueryloopsonclickthiseach

JQuery toggle class transition failing to function

I have attempted to incorporate CSS transitions to toggle classes, but unfortunately, they are not functioning as expected. No change occurs. Here is a reference to the code in question: https://jsfiddle.net/n1rz7jqp/ JQUERY: $('.right-side-men ...

javascriptjqueryhtmlcsstransition

Collect data from website submissions via email

Is it possible to receive the results via email when someone submits their details on my site using a script? My server does not allow .php or .asp files, only .css. How can I achieve this? ...

cssemail