Trigger a div to transform upon hover among multiple divs sharing the same class

I have encountered an issue with multiple divs having the same class. I've written a JavaScript code to adjust certain CSS properties on hover, but the problem is that when I hover over one box, all others with the same id and class are also affected. I only want to change the styles of the currently hovered box.

HTML

<div class="gameBox" id="gameBox">
            <img src="https://yggdrasilgaming.com/wp-content/uploads/2016/12/yggdrasil-slot-empire-fortune.png" class="gameBoxBg"/>
            <h3 class="gameBoxText">Empire Fortune</h3>
            <div class="downloadCentralizer">
                <img class="downloadLink rightSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/googlePlay.png"/>
                <img class="downloadLink leftSpace" id="downloadLink" src="https://www.kuboland.com/atm2u/images/apple.png"/>
            </div>
        </div>

JAVASCRIPT

$("#downloadLink, .gameBoxBg, .gameBoxText").hover(function(){
    $(this).find(".gameBoxBg").css("filter", "blur(4px)");
    $(this).find(".gameBoxText").css({"opacity": "1", "display": "block"});
    }, function(){
    $(this).find(".gameBoxBg").css("filter", "blur(0px)");
    $(this).find(".gameBoxText").css({"opacity": "0", "display": "none"});
});

Could someone please help me resolve this issue? Thank you!

javascripthtmlcss

Answer №1

To make changes to the content inside a .gameBox element, you can add an event listener to the .gameBox selector. Then, within the event function, target the child elements of the current .gameBox and update their styles.

$(".gameBox").hover(function() {
    $(this).find(".gameBoxBg").css("filter", "blur(4px)");
    $(this).find(".gameBoxText").css("opacity", "1");
    $(this).find(".gameBoxText").css("display", "block");
}, function() {
    $(this).find(".gameBoxBg").css("filter", "blur(0px)");
    $(this).find(".gameBoxText").css("opacity", "0");
    $(this).find(".gameBoxText").css("display", "none");
});

Remember, using $(".gameBoxBg") will affect all elements with that class in your document. To only target the specific .gameBox's children, utilize $(this).find(".gameBoxBg") instead.

Answer №2

My thoughts exactly! It's crucial to ensure that all ID values are unique within the entire document.

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

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

javascriptphpjqueryhtml

Using relative URLs in HTML to navigate a specific group of requests via nodejs middleware

Alright, so let me dive into the details of my current dilemma. Essentially, I have a project implemented in node that serves a specific purpose. It's a website utilizing express, jade, and stylus. I have configured the routing for static content in ...

htmlnode.jsexpress

Discovering the Power of IONIC with JSON Data Suggestions

Which method is more effective for handling JSON data, especially when working with IONIC? var quizs = [ {id: 1, question: '1.jpg', desc: 'What color is displayed here', answer: 'blue, green, ...

javascriptjsonangularjsionic-framework

Can users arrange a lineup of choices?

As a beginner, I have a task that seems pretty simple to others but not so much for me. I need to create a feature where a client can order 10 different services in the order they prefer. The idea is to use a dropdown menu or checkboxes to allow the user ...

javascriptjquery

Finding the Attachment ID on a JIRA Issue Page with JavaScript

Currently, I am using an ajax call that requires the attachment id in its URL. The URL is hardcoded as follows: url: AJS.contextPath()+"/rest/api/latest/attachment/10415" jQuery.ajax({ url: AJS.contextPath()+"/rest/api/latest/attachment/10415", TYPE: "GET ...

javascriptjqueryajaxjsonjira

Promise-based React Redux Login: An error occurred during login process

I'm currently working on my first React+Redux application and I'm still in the scaffolding phase. As a newcomer to React, I've encountered an issue with my simple login app. The AuthAction returns a Promise from the login(username, password) ...

javascriptreactjsreduxpromisereact-redux

Display an error popup if a server issue occurs

I'm considering implementing an Error modal to be displayed in case of a server error upon submitting a panel. I'm contemplating whether the appropriate approach would be within the catch statement? The basic code snippet I currently have is: u ...

javascriptreactjstypescripttry-catch

How can scripts be used to enable fullscreen in PhoneGap?

Can JavaScript in PhoneGap enable fullscreen mode and hide the status bar? While I know it can be pre-defined in config.xml, I'm unsure if it can be changed dynamically. I've come across resources suggesting that plug-ins are necessary here, but ...

javascriptcordovafullscreen

Changing array values in React using the setState method and index

Is the code below acceptable for updating an array value using an index? updateArrayValue = index => e => { const { spaceship } = this.state // ['SpaceX', 'NASA', 'Blue Origin'] spaceship[index] = e.target.value t ...

javascriptreactjsecmascript-6

Is there a simple method to refresh a JSP or Spring MVC page using AJAX?

I'm tackling a seemingly basic question in Java web development here, but I could use some guidance. How can I refresh data on a JSP page? I understand the fundamentals (utilize jQuery for AJAX, Spring MVC for the "Controller" & handle data reque ...

javajavascriptajaxjspspring-mvc

Tips on saving additional parameters in an API URL with AngularJS

Here is my AngularJS function code: $scope.cardcall = function (cardtype) { $scope.cityname=cityname; $http({method: 'GET',url: '/api/v1/asasas&filterBy=cardNames&filterByValue='+cardtype.key}).success(funct ...

javascriptangularjsangularjs-ng-repeatangularjs-service

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

What is preventing me from utilizing require in vue-router's routes.js file?

Vue-router typically requires the standard setup as outlined below: In main.js, the routes.js file is required and it usually contains code similar to this: //routes.js import Register from './components/Register' import Login from './comp ...

javascriptvue.jsimportvue-routerrequire

What is the best method for parsing information from the HTML source code of a specific tab on a webpage?

I have tried various methods mentioned in different responses, such as testing with different user agents (Chrome, Safari etc), and fetching HTML directly using HTTPClient and BufferedReader, but unfortunately none of them seem to be effective. How can I ...

javaandroidhtmlajaxjsoup

Protractor performs the afterEach function prior to the expectations being met

I am completely baffled by the behavior of this code. Everything seems to be executing correctly up until the 'expect' statement, at which point it abruptly navigates to a new page and runs the afterEach function. I've tried various solution ...

javascriptangularprotractor

Default value automatically changes the hashed URL in Backbone.js

Issue: I am facing a problem where after going to step 2, the "start" route becomes active for some reason. How can I address this problem? Here is the scenario: I start from step one -> move to step 2 -> the step2view is rendered, but then it immed ...

javascriptjquerybackbone.js

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

Is the Android Webview causing input boxes to double up?

Looking to develop an Android application that utilizes a webview for users to input their username/password, but encountering a strange issue where tapping on the input boxes creates duplicates (as shown in the image below). I have implemented the iScroll ...

javascriptandroidhtmlwebviewcordova

Implement an autocomplete feature for input tags that are added dynamically

I am currently building an autocomplete feature for an input field using the code snippet below: $('.query').autocomplete({ serviceUrl:'http://localhost/main/finder.php', minChars:2, delimiter: /(,|;)\s*/, // regex or ...

javascriptjqueryautocomplete

How can I control audio playback with just a click on an image on an HTML webpage?

I attempted to use a code from this website, but it doesn't seem to be working for me. I was hoping that someone here could lend a hand. The code I tried makes the song play when I click the gif image, but when I click it again, it just restarts. H ...

javascripthtmlimageaudio