ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here:

Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction.

Here is the jQuery code I have implemented:

$('.package').hover(function(){
     $('.name').toggleClass('name-hover')
     $('.price-container').toggleClass('price-hover')
     $('.price').toggleClass('white-hover')
     $('.month').toggleClass('white-hover')
 });

The CSS adjustments are just to modify the current colors:

    .package .price-hover {
        background: #008ed6;
    }

    .package .white-hover {
        color: #fff;
    }

I have attempted using $(this), but it does not produce the desired effect.

javascriptjqueryhtmlcss

Answer №1

$('.product').on('mouseover', function(){
    $(this).find('.title').toggleClass('title-highlighted')
    $(this).find('.cost-container').toggleClass('cost-hover')
    $(this).find('.cost').toggleClass('highlighted')
    $(this).find('.monthly').toggleClass('highlighted')
});

Answer №2

There is no need to complicate things by adding JavaScript when this can be easily accomplished with CSS alone.

.product:hover .price-container{
    background: #008ed6;
}

Answer №3

If you want to iterate through each element using jQuery, you can utilize the `each()` function:


$('package').each(function() {
  var currentElement = this;
  $(this).hover(function() {
    $(currentElement).find('.name').toggleClass('name-hover');
    $(currentElement).find('.price-container').toggleClass('price-hover');
    $(currentElement).find('.price').toggleClass('white-hover');
    $(currentElement).find('.month').toggleClass('white-hover');
  });
})

Answer №4

  • To ensure that only the classes for elements within the currently hovered over .package are changed, make use of the find function. Otherwise, classes will be modified for all related elements.
  • Additionally, the hover event consists of 2 functions: one is triggered when the mouse enters the hover area, and the other activates when the cursor exits the hover area. As per how you're managing the hover event, it toggles the classes twice - once on hover in and once on hover out, ultimately restoring it to its original state.

Experiment with this code:

$('.package').hover(function(){
     $(this).find('.name').addClass('name-hover');
     $(this).find('.price-container').addClass('price-hover');
     $(this).find('.price').addClass('white-hover');
     $(this).find('.month').addClass('white-hover');
 }, function(){
     $(this).find('.name').removeClass('name-hover');
     $(this).find('.price-container').removeClass('price-hover');
     $(this).find('.price').removeClass('white-hover');
     $(this).find('.month').removeClass('white-hover');
 });

Answer №5

$(".package").on("mouseover", function() {
    let $this = $(this);
    $this.find(".name").toggleClass("name-hovering");
    $this.find(".price-container").toggleClass("price-hovering");
    $this.find(".price,.month").toggleClass("white-onhover");
});

@Spartak Lalaj According to the jQuery documentation, starting from version 1.4, the .hover() method can have just one parameter. For more information, visit https://api.jquery.com/hover/

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

The retrieval of a Backbone Model from a Lithium controller does not seem to be loading correctly within the bb Model

I'm currently utilizing backbone.js and Lithium for my project. My task involves fetching a model from the server by passing in a unique _id that is received as a hidden parameter on the page. The database MongoDB has successfully stored the data, an ...

phpjquerybackbone.jsphp-mongodblithium

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

htmlcsstwitter-bootstrap

Chrome App Experiencing Issues with DOM Loading

I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file: <!DOCTYPE html> <html> <head> <title>Snake</title> <link rel=" ...

javascriptgoogle-chromecanvasgoogle-chrome-devtoolsgoogle-chrome-app

Angular Material 2: Sidenav does not come with a backdrop

I'm encountering an issue with the SideNav component while developing a website using Angular 2. The SideNav has 3 modes, none of which seem to affect what happens when I open it. I am trying to make the backdrop display after opening. Even though t ...

htmlangulartypescriptangular2-routingangular-material2

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

cssbootstrap-4

Interactive Conversation Interface for Customer Communication

I've noticed on a lot of websites that companies often place contact forms, login or sign up forms in the lower right corner, similar to a chat box. When you hover and click on it, a full form opens up for users to submit data. I'd like to impl ...

jquery.net

Having trouble submitting a FORM remotely on Rails 3.0.3?

I am currently working with Rails 3.0.3 and using jQuery ujs for my project. My goal is to send a form remotely. The view template mains/index.html.erb where the form is located appears like this: ... <%= form_tag :remote => true, :controller => ...

jqueryajaxruby-on-rails-3ujs

Steps for Displaying Data from API Response in Vue.js

Immediately rendering the following template, without waiting for the API call to complete. I came up with a solution using v-if to prevent elements from rendering until the data is available. However, this seems to go against the DRY principle as I have ...

javascriptvuejs2vue.js

Limiting the number of rows in a PHPexcel array

Is there a way to prevent the repcode from being empty if a specific name (array) is empty? I'm facing this issue with my excel report. Even when I only fill out 1 row in my form, the repcode is saved from 1 row to 10. Here is the current code: < ...

phphtmlmysqlphpexcel

Is there a way to remove specific elements from an array without using jQuery?

I've recently started diving into Javascript, experimenting with Tampermonkey scripts for the past week. The webpage I'm currently working on features dynamic elements that appear randomly with each page load. Sometimes only one element like "he ...

javascriptjqueryhtmlarrays

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

After spending the entire day researching this issue, it appears to be a common problem without a solution in sight. The challenge I am facing involves using jquery's $.ajax() function to update database values through a service call. While it works ...

c#javascriptajaxjquery

Animation of underline on hover for NavLink

As a newcomer to React, I am currently exploring how to create an animated underline effect when hovering over a NavLink from reactstrap. I have managed to get the underline working on hover thanks to the solution provided at , but I am struggling with imp ...

cssreactjscss-animationsreact-bootstrap

What is the best way to dynamically update a state that is deeply nested?

Is there a way to update the object using key: 1311 and retrieve the updated state while not knowing its exact location but only its key value? state = { iow: [ { key: 1, iow_description: "EARTH WORK", unit: null, rate: nul ...

javascriptreactjsmultidimensional-array

Step-by-step guide on saving an array to localStorage using AngularJS

Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...

javascripthtmlangularjscookiestore

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Simply put, we are creating interactive content in Flash that we want to distribute through an iOS app either by in-app purchase or subscription. In our testing, we have found that Flash can produce standalone iOS apps that work well for our needs. Instea ...

iphoneflashioshtml

Utilizing a form on numerous occasions prior to its submission

As a newcomer to JavaScript, I am exploring the best approach for a specific task. The task involves a form with checkboxes representing different music styles and a selector for names of people. The goal is to allow users to select music styles for mult ...

javascriptjquerydjangoformsjavascript-databinding

Unable to reset HighCharts Speedometer value to zero

I am currently experimenting with implementing the highcharts speedometer. The goal is to simulate a connection meter - when there is a good connection, the meter should display values between 30 and 100. If the connection result from an Ajax call is any ...

javascriptajaxhighchartsmeter

Implementing dynamic page loading with ajax on your Wordpress website

I'm currently facing an issue with loading pages in WordPress using ajax. I am trying to implement animated page transitions by putting the page content into a div that I will animate into view. However, my current logic only works correctly about 50% ...

javascriptjqueryajaxwordpress

React slick does not display arrows when there are 4 or more photos

I am facing an issue where the next and previous arrows are not appearing when I have 4 or more photos on react-slick. However, they show up fine when there are 3 or fewer photos. You can view my code at this link: https://codesandbox.io/s/wyyrl6zz3l ...

javascriptreactjssliderreact-slick

Having trouble converting a JSON array into a JavaScript array upon creation

I have encountered this question multiple times before and despite trying various solutions, I have not been able to find success. Summary: My goal is to retrieve the array from the classes.json file and then assign the data in the variable classes from d ...

javascriptjsonvue.js