Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same line is selected.

HTML 

 <div class="body2">
                    <div class="block" id='block'>
                        <div class="block-header">
                            <div class="arrow-down" style="left:83px"></div>

                        </div>
                    <div class="block-body">
                        <p style="margin-top:25px;"></p>
                        </div>
                        </div>
                        <div class="block" id='block'>
                        <div class="block-header">
                            <div class="arrow-down" style="left:284px"></div>

                        </div>
                    <div class="block-body">

                        </div>
                        </div>
                    <div class="block" id='block'>
                        <div class="block-header">
                            <div class="arrow-down" style="left:485px"></div>
                        </div>
                    <div class="block-body">

                        </div>
                        </div>
                        <div class="block" id='block' style="margin-right:0px;">
                        <div class="block-header">
                            <div class="arrow-down" style="left:686px"></div>

                        </div>
                    <div class="block-body">

                        </div>
                        </div>
                    </div>

CSS

.body2 .block{
display:inline-block;
border:solid 2px #eaeaea;
height: 165px;
width: 180px;
margin-right: 19px;
}
.body2 .block:hover{
cursor:pointer
}
.body2 .block .block-header{
    height: 35px;
border-bottom: solid 2px #eaeaea;
width: 180px;
}
.body2 .block .block-header .arrow-down{
 width: 15px;
height: 15px;
border: 2px solid #eaeaea;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
position: absolute;
left: 10%;
background-color: #fff;
z-index: 10;
top: 74px;
 }

.body2 .block .block-body{
width:174px;
 }

JS

$('.body2 #block').hover(function(e){
    $($(e.currentTarget).find('.block-header')).css('border-color','blue');
    $($(e.currentTarget).find('.block-header')).css('background-color','blue');
    $($(e.currentTarget).find('.arrow-down')).css('background-color','blue');
    $($(e.currentTarget).find('.arrow-down')).css('border-color','blue');
    $(e.currentTarget).css('border-color','blue');
}, function(){
    $('.body2 .block .block-header').css('border-color','blue');
    $('.body2 .block .block-header').css('background-color','blue');
    $('.body2 .block .block-header .arrow-down').css('background-color','blue');
    $('.body2 .block .block-header .arrow-down').css('border-color','blue');
    $('.body2 .block').css('border-color','blue');
} );

Although the hover effect functions correctly on my local machine, I am having trouble implementing the click selection. Here is a JSFiddle demonstrating the issue.

Thank you

javascriptjquerycss

Answer №1

Check out my solution on this fiddle: https://jsfiddle.net/op4fLwbo/15/

Here's the updated javascript:

$('.body2 .block').hover(function() {
    $(this).find('.block-header').toggleClass('hovered');
    $(this).find('.arrow-down').toggleClass('hovered');
    $(this).toggleClass('border-hover');
});

I made sure to include jquery in the code, which was causing the issue on fiddle.

In the css, I added !important to the new classes for better specificity, but you may need to adjust accordingly.

I hope this resolves your problem and meets your requirements.

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

What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below: let rotation = ...

cssanimationsvgrotationcss-transforms

Using the HTML form element to achieve two-way binding on array elements

I am working with an array of objects within a component that will be iterated in the template. app.component.ts import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.compone ...

javascriptangularangular-componentsangular-template

Inject a <div> element into a table row upon clicking a button using jQuery and PHP

I am faced with an issue regarding displaying pdf reports within specific table rows. The scenario involves a table containing folder paths and buttons in each row. Upon clicking the button, the path is sent to a sequence of PHP files (ajax.php, ajax2.php, ...

phphtmljquery

The content of the string within the .ts file sourced from an external JSON document

I'm feeling a bit disoriented about this topic. Is it feasible to insert a string from an external JSON file into the .ts file? I aim to display the URLs of each item in an IONIC InAppBrowser. For this reason, I intend to generate a variable with a sp ...

javascriptangulartypescriptionic-framework

How to arrange elements at the same level in Node.js using sequelize-hierarchy?

Is there a way to change the order of items on the same level in sequelize-hierarchy for creating a menu? I've noticed that currently, the items are ordered by their sequence of insertion. But what if I want to manually set the order? Here is an exam ...

javascriptnode.jsdatabase-designmenusequelize.js

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...

htmlcss

JavaScript utilizes regex patterns to modify the value located between the characters within an input's name attribute

Can anyone assist me in creating a unique regex pattern to extract specific characters from the attribute values of HTML inputs? I'm dynamically cloning select elements and input text with button clicks, so I need to maintain the attribute name synta ...

javascriptjqueryregexjson

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

javascripthtmlreactjs

Ways to eliminate text following a string substitution

When running the code below with keys assigned to summer, spring, fall, and winter, the output for ins would be: ['req.body.summer, req.body.spring, req.body.fall, req.body.winter'] I need to eliminate the surrounding string from the replace co ...

javascriptnode.jsexpress

Attempting to iterate over the array of objects in order to discover a match

I am currently working with an object structure that resembles the one shown in the image linked below. My goal is to compare the inner object properties (such as massing type id) with existing IDs. If there is a match, I want to retrieve the name of that ...

javascriptreactjsecmascript-6

Modal Pop-ups Failing to Open on Subsequent Attempts

My table consists of buttons on the right-hand side for a menu. The first button in the menu is supposed to open a modal box upon clicking. However, the first buttons in the subsequent rows do not function as expected and fail to open the modal. Refer to t ...

javascripthtmlcss

Streamline retrieval of alphanumeric indexing within json

When accessing json data using jquery, I came across an index structure like this: data.rows[0].student_1 data.rows[0].student_2 data.rows[0].student_3 and so on... Now, I'm looking to automate this process by creating a loop that allows me to acces ...

javascriptjqueryjson

Is it possible to use Ajax post with localhost on Wamp server?

Looking to execute a basic POST function using Ajax on my localhost WAMP server. Here's the code I have: function fill_table() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari ...

javascriptjqueryajax

Roughly one out of every 500 users tend to send GET requests instead of POST

We have implemented the following AjaxSetup configurations: $.ajaxSetup( { cache: false, type: 'POST', contentType: "application/json", data: "{}", headers: { "Accept": "application/json; charset=utf-8" }, beforeSend: fun ...

jqueryajaxpostget

Using PHP, create a redirect page that utilizes AJAX and jQuery for a seamless user experience

My goal is to navigate from page a to the profile page with a post session in between. Let's assume that the data is stored in a variable called $name as a string. The current code on page a looks like this: jQuery("#result").on("click",function(e){ ...

javascriptphpjqueryajax

Adjusting a parameter according to the width of the browser window?

Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...

javascriptjqueryjquery-masonry

capable of concentrating but unable to enter text into input field using jquery

I have a set of five rows, each containing three columns of text boxes, along with a single text area. When tabbing from the third column in a row, the focus should shift to the text area, and then tabbing from the text area should move to the next row of ...

jqueryformstextinput

Migrate the JavaScript variable created with 'passport' to an Express router

In my quest for authentication, I created the essential passportAuth.js file: module.exports = function(passport, FacebookStrategy, config, mongoose, fbgraph){ passport.serializeUser(function(user,done){ //to make user reference available across pages ...

javascriptnode.jsexpresspassport.js

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

javascripthtmlcssreactjs