Triggering mouseOver on a recurring element with various class selectors in JavaScript

I'm having some difficulty with a mouseOver effect that I am trying to implement. The issue can be seen in the following link: http://jsfiddle.net/4t4nM/1/

Here is the HTML structure I am currently utilizing:

<div class="row">
   <div class="large-3 small-6 columns">
      <div class="panel">News  + Video </div>
   </div>
</div>

The functionality I am aiming to achieve involves triggering an animation when hovering over the "large-3 small-6 columns" element, specific to the "panel" div within that particular cell (and not affecting other cells with the same class). Here is the JavaScript code I have been working on:

$( function(){
  $('.large-3').mouseenter( function(){
    $('.panel').stop().animate({opacity:1});
   }).mouseleave( function(){
    $('.panel').stop().animate({opacity:0});
   })
});

I am struggling to ensure that the mouseover effect only applies to the current cell being hovered over. Additionally, I am facing challenges in incorporating multiple class selectors in the JS script.

Any assistance or guidance on this matter would be greatly appreciated.

This script will ultimately be implemented in the following context:

javascriptjqueryhtmlcssmouseover

Answer №1

Your HTML code needs some fixing. Here is the corrected version:

<div class="row">

<div class="large-3 small 6 columns">
    <img src='http://www.zoommarketing.com/jordanswonderfullandofwhat/img/smiley-1.jpg'/>
    <div class="panel">Videos and News</div>
</div>
<div class="large-3 small-6 columns">
    <img src='http://www.zoommarketing.com/jordanswonderfullandofwhat/img/smiley-1.jpg'/>
    <div class="panel">Videos and News</div>
</div>

</div>

Additionally, here is an updated JavaScript code that will only trigger when hovering over a specific element using jQuery's this selector:

$( function(){
  $('.large-3').mouseenter( function(){
    $('.panel', this).stop().animate({opacity:1});
  }).mouseleave( function(){
    $('.panel', this).stop().animate({opacity:0});
  })
});

Check out the revised JSFiddle

Answer №2

The HTML code is missing a closing div tag. To resolve the JavaScript issue, you can utilize $(this) to pinpoint the specific div being hovered over. By incorporating the .find() function, you can precisely target the panel within that particular div and toggle its visibility.

$('.large-3').mouseenter(function () {
    $(this).find('.panel').stop().animate({
        opacity: 1
    });
}).mouseleave(function () {
    $(this).find('.panel').stop().animate({
        opacity: 0
    });
})

I have made corrections to your fiddle by updating the markup and providing an example of fixed JS - http://jsfiddle.net/4t4nM/3/

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 there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml

Error Loading Message Appears with jQuery Mobile 1.3.1 and Flot Integration

I am trying to implement a flot interactive example with jQuery Mobile 1.3.1 in my project. However, I am encountering an issue with the latest version of jQuery Mobile where there is a strange frame around the chart and a "loading" text at the bottom of t ...

jqueryhtmljquery-mobilejquery-pluginsflot

Retrieve an array containing the strings paths to each nested property located within an object

I am faced with the challenge of dealing with a large, unwieldy 1MB+ JSON object that contains multiple levels of properties, including nested arrays with even more nested objects. What I need is a function that can analyze this object and return an array ...

javascriptnode.jsjavascript-objects

Can using .wrap( ) negate the styling effects of the wrapper?

I am struggling with centering a button on my webpage. Currently, I have the following code for creating the button: var button = ($('<button>', { "id": "jspsych-free-sort-done-btn", "class": "jspsych-free-sort", ...

jqueryhtmlcsstext-align

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

Display a jquery div box on top of a button

Here is a link to the fiddle I am currently working on: http://jsfiddle.net/d0okie0612/22cTn/ I am attempting to make the box appear on top of the button but at the bottom of the existing div box. <div id="top_form"> <form> Street: <input ...

jquery

Having trouble uploading an image as it is not being saved on the server

Today, I am focusing on something a lot simpler than my usual content! I am attempting to create an 'Upload' button that enables users to upload pictures of themselves. The uploaded picture should be renamed as pid and saved to the images folder. ...

phphtmlformsfile-upload

The issue I encountered with Angular's Mat-Select component is that the openedChange

When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to ...

htmlcssangularangular-material

Creating a custom Angular directive for a jQuery control: Step-by-step guide

Looking to integrate the tagging UI control from here into an Angular application. Normally, without Angular, you would initialize it like this: <script type="text/javascript"> $(document).ready(function () { $("#myTags").tagit(); } ...

javascriptjqueryangularjs

Streamline the entire testing process of Google.Com by using Protractor to automate end-to-end testing

I need help with making Protractor navigate to google.com and search for a term. After successfully loading the non-angular page of Google, I am struggling to figure out how to make Protractor press "enter" or click the search button. Any suggestions? Ad ...

javascriptangularjsprotractorend-to-end

"Compatibility issues discovered with Bootstrap Affix across various browsers including IE, Chrome, and MS Edge

Recently, I encountered an issue while developing a new website in Firefox. After a few days, I realized that Bootstrap affix was not working properly in Chrome, IE, and Edge. I am using the latest versions of Bootstrap, Firefox, and Chrome, but I am unsur ...

javascripthtmltwitter-bootstrapcss

Guarding Against Form Injection in Flask

How can Python and Flask prevent foreign form injections? Take a look at this example: app.py from flask import Flask, request, render template app = Flask(__name__) @app.route('/', methods=['GET','POST']) def helloworld( ...

pythonjqueryflaskcsrf

How can I easily swap between the front and back cameras while using an app?

Trying to create a web-ar experience that allows users to switch between front and back cameras while utilizing SLAM/6dof with the back camera has been a challenging endeavor. While attempting this in PlayCanvas, I faced difficulties getting the front came ...

javascriptaugmented-realityaframeplaycanvas8thwall-web

Is there a way to submit HTML form data using the action attribute without triggering a redirection to a different page?

I am currently working with Angular and Plaid. My goal is to submit a form that sends the public_token to /authenticate using the 'action' attribute in the HTML form. How can I achieve this without being redirected to another page? Step 2: Easy ...

javascripthtmlangularjsplaid

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

javascriptvue.js

Issue with Updating Selected Value in Dropdown List (SemanticUI)

For my dropdown list, I am utilizing SemanticUI <div class="ui dropdown"> <input type="hidden" name="gender"> <i class="dropdown icon"></i> <div class="default text">Gender</div> <div class="menu"> < ...

javascripthtmlsemantic-ui

Reversing the order of images on overlapping canvas

When I utilize the following code to draw on my HTML5 canvas: <canvas id="game">Your browser can't use canvas</canvas> <script> var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var ...

javascripthtmlimagehtml5-canvas

PHP code isn't showing any posts

Context: I have implemented a PHP loop to generate a dynamic feed of my portfolio posts on my WordPress website. Issue: The first five posts are being displayed correctly, but the subsequent posts are not. I'm uncertain about the underlying cause and ...

phphtmlcsswordpressloops

How to redirect to a different view or controller using ASP.NET and AngularJS

How can I open the View located at /Home/CreateItem after clicking on the Add button? What do I need to include in my code? $scope.Add = function() { console.log('working'); } This is how Index.cshtml looks like: <script src="~/ ...

javascriptasp.netangularjs

Using Bootstrap Select with a callback function

I am currently working with 2 Bootstrap Select dropdowns. One dropdown contains a list of countries, while the other contains a list of states. The country list is static and loads when the page is loaded. On the other hand, the state list is populated dyn ...

javascriptjqueryajaxbootstrap-select