``There seems to be an issue with disapplying a CSS class using JavaScript

I've designed a website that appears to have multiple pages, but in reality, all the content is contained within one HTML file: index.html. Using javascript and CSS, I have divided the site into a "home" position and an "inside" position similar to a home page and inside page. Now, I'm facing an issue where links are not behaving as expected when a user navigates from the home page to an inside page.

You can view a simplified version of the page here:

On this example site, there's just the home page and the "Services" page accessible through links.

When you mouseover the grey links (referred to as "balloons" in the code) on the left side, they should change color and display a popup graphic only when the page is in the "home" position. This behavior is controlled by a class called "popup_yes." However, even after removing this class upon navigating to the "Services" page, the hover/popup action still persists.

Upon inspecting the element using Chrome, I can see that the "popup_yes" class has been removed from the code, yet it continues to influence the hover/popup functionality. You can see a comparison between the "home" and "inside" pages in this screenshot from Inspect Element:

https://i.sstatic.net/p1ZP7.jpg

I'm seeking assistance to understand why the hover/popup action is still active on the "Services" page despite removing the "popup_yes" class. Any insights or solutions would be greatly appreciated. Thank you!

javascriptcssremoveclass

Answer №1

The problem lies within the mouseover/out code you provided.

$(".popup_yes .balloon_1").mouseover(function() {
    $("#popup_1").show(400);
    $(".balloon_1").addClass("hover");
});

Upon page load, the hover event is already bound to that span element. By implementing a conditional check within the function like so:

$(".popup_yes .balloon_1").mouseover(function() {
    if ($('#balloons').hasClass('popup_yes') ){ //<--here
        $("#popup_1").show(400);
        $(".balloon_1").addClass("hover");
    }
    });

You should see the desired behavior taking place.

Answer №2

After making some adjustments to the javascript code you provided, I was able to successfully get it working. Here's what I changed:

When clicking on the services page, I specified which class should be removed instead of just removing any class:

$('#balloons').removeClass("popup_yes");

Additionally, when returning to the Home page, I added a line to reapply the class after animating the $('#buttons') div:

$("#balloons").addClass("popup_yes");

I also updated the hover effect for each balloon. Below is an example for the first balloon - similar changes can be made for the rest:

$(".balloon_1").mouseover(function() {
   if($(this).closest('#balloons').attr("class")=="popup_yes"){
      $("#popup_1").show(400);
      $(".balloon_1").addClass("hover");
     }
 });

$(".balloon_1").mouseout(function() {
    if($(this).closest('#balloons').attr("class")=="popup_yes"){
        $("#popup_1").hide(400);
        $(".balloon_1").removeClass("hover");
     }
});

Instead of checking both hovering classes, I simplified it by only considering the balloon_1 class and ensuring the effect applies only when its closest parent with an id of balloons has the popup_yes class.

I tested this in Chrome and hope that it functions smoothly across other browsers too.

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

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

javascripthtmlhtml5-videocors

Issue: The variable THREE has not been defined within the FBXLoader code

Currently, I am utilizing the module version of three.js in order to execute imports from a client-side JavaScript file structure. The core functionality of THREE is working correctly. However, I am encountering an issue when attempting to use it with FBX ...

javascriptnode.jsthree.jsnode-modulesfbx

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

I'm curious why the button appears grey in IE and turns blue on hover, rather than starting off blue and becoming darker blue when hovered over. I've managed to make it work in other browsers, but I'm struggling with the code for IE. Thank ...

htmlcssinternet-explorer

Customize the shadow array values in Material UI themes by utilizing the createMuiTheme function to override default

Currently, I have a customized theme for my toolkit where I am utilizing createMuiTheme to override various properties like palette, fonts, etc. One particular challenge I am facing is in minimizing the shadow array within the theme object which contains 2 ...

javascriptarraysreactjsthemesmaterial-ui

Steps for clearing the chosen input data

I am currently developing an Angular 6 application and I am working on implementing a multiple select feature using just an input box without relying on any third-party plugins, jQuery, datalist, or select boxes. The solution needs to be purely input box b ...

javascripthtmlangulartypescriptmulti-select

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible? Here is the code in question: <html> <head> <title> Test Slides </titl ...

javascripthtmlcsstwitter-bootstrap

Enhance the database with partial updates using the patch method in Django Rest Framework

I have a model called CustomUser that extends the AbstractUser class. class CustomUser(AbstractUser): detail = models.JSONField(default=dict) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=Tr ...

javascriptpythondjango

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

csstypescriptmaterial-ui

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

phpmysqlcss

Svelte is unable to bring in

Hey there, I'm new to Svelte and currently working on a simple feedback app. I have divided my project into two files - one for the main app and another for a list of feedbacks. Here is my App.svelte file: <script> import feedback from ". ...

javascriptnode.jsimportexportsvelte

What is the process for creating a dynamic URL, such as example.com/profile/CroatiaGM?

I am in the process of developing a user control panel, and I have encountered some difficulties with creating a dynamic profile link. For instance, how can I achieve something like example.com/profile/CroatiaGM? Given that my website is primarily coded ...

javascriptphp

After signing out, the function getRedirectResult in Firebase is being invoked

I'm a bit confused about some interesting behavior I've noticed while working with Firebase. Although I never used the older version, I believe getRedirectResult is a newer feature since they partnered with Google. Currently, I am using Vue.js a ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

What can I do to prevent Bootstrap sections from overlapping on smaller screens?

While my website looks great on my laptop screen, I'm facing an issue when viewing it on a smaller device. The text from the first section is overflowing into the lower section, which disrupts the layout. Despite being new to bootstrap, I've trie ...

htmlcsswebbootstrap-4

Mapping two arrays in JavaScript involves iterating through each element of the arrays

I'm having trouble displaying the content of two arrays contained within an object. When I map over RType.information.Type, I can display the content of the "Type" array. However, I am unable to display both Type[] and Price[]. I've tried various ...

javascriptarraysjsonobjectmithril.js

AngularJS does not recognize the service being referenced

I keep encountering an error in AngularJS saying that the service is not defined, even though my controller and module are properly connected: application.js: var myapp=angular.module('myApp', []); myapp.service('productService', fun ...

javascriptangularjsangular-services

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Can Modernizr and jQuery be combined to create a transition effect similar to CSS3 if it's not supported? My current approach looks like this... <div class="hoverable"> <p>This div changes both width and height on hover</p> </di ...

javascriptjquerycsstransition

JavaScript "alternating pattern"

When faced with this code test question, I decided to tackle it with the following approach: function createPattern(){ var result = '' for (var row = 0; row < 10; row++){ for (var col = 0; col < 10; col++){ ...

javascript

The hidden Material UI Collapse component is still occupying space on the page

Currently, I am implementing Material UI Collapse in my React project and encountering an issue where it is causing unnecessary space on the interface when hidden <Collapse in={false}> //content here </Collapse> Even though I have not a ...

cssmaterial-ui

The box-shadow is evenly distributed on the top and bottom as well as on the right and left sides

.box { background: blue; width: 500px; height: 550px; margin: 25px 0 25px 25px; border-width: 30px; border-style: solid; border-color: blue grey yellow green; box-shadow: 20px 20px 0 10px purple, -20px 20px 0 10px purple, 20 ...

htmlcss

Ways to determine if a substring is contained within the text of an array item

Recently, I've been researching ways to check if a certain value exists in an array using indexOf('textvalue'). However, I have encountered the issue of my 'textvalue' being a substring, which causes no matches to be found. The pro ...

javascriptarraysindexof