Switching Classes with a Click of a Button

Hey there, I'm currently using this menu: spoilers.tumblr.com/tvschedule, and I have a script below. The functionality works well with the click event, but I'm having some trouble with the hovering effect. To make certain classes visible on hover, I first need to hide others, but I don't want them to stay hidden once the hovering is finished. It's a bit difficult to explain, so you'll have to see it in action on my page.

If anyone can assist me with this, I would really appreciate it. :)

P.S. I've attempted adding the class back after hovering, but that didn't achieve what I wanted. I also tried playing around with z-index in the CSS, but that didn't work out either.

<script type="text/javascript">
$(document).ready(function(){



 $("#all").hover(function() {
 $('.morenav').removeClass('hoverednow hoveredhiatus hoveredto hoveredfinished clickedfinished clickedto clickedhiatus clickednow');
$(this).closest(".morenav").toggleClass("hoveredhall")}



);

$("#now").hover(function() {
 $('.morenav').removeClass('hoveredall hoveredhiatus hoveredto hoveredfinished clickedfinished clickedto clickedhiatus');
$(this).closest(".morenav").toggleClass("hoverednow")
}


); 

$("#hiatus").hover(function() {
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredfinished clickedfinished clickedto');
$(this).closest(".morenav").toggleClass("hoveredhiatus")
});

$("#to").hover(function() {
   $('.morenav').removeClass('hoveredall hoveredhiatus hoverednow hoveredfinished clickedfinished');

$(this).closest(".morenav").toggleClass("hoveredto")
}); 

$("#finished").hover(function () {
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredhiatus');
$(this).closest(".morenav").toggleClass("hoveredfinished")
 });  

$("#all").click(function() {
$('.morenav').removeClass('clickednow clickedhiatus clickedto clickedfinished');

$(this).closest(".morenav").toggledClass("clickedall")
});  

$("#now").click(function() {
 $('.morenav').removeClass('clickedhiatus clickedall  clickedto clickedfinished');
$(this).closest(".morenav").toggleClass("clickednow")
});

$("#hiatus").click(function() {
     $('.morenav').removeClass('clickednow clickedall clickedto clickedfinished');

$(this).closest(".morenav").toggleClass("clickedhiatus")
}); 

$("#to").click(function() {
 $('.morenav').removeClass('clickednow clickedall clickedhiatus clickedfinished');
$(this).closest(".morenav").toggleClass("clickedto")
}); 

$("#finished").click(function() {
$('.morenav').removeClass('clickednow clickedall clickedhiatus clickedto');
$(this).closest(".morenav").toggleClass("clickedfinished")
}); 


});</script>

CSS

.morenav.hoveredall {background:#f0f0f0; position:fixed; z-index:9999999; -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}

.morenav.clickedall {background:#f0f0f0;  -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}


.morenav.hoverednow {background:#6E0420;  -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}

.morenav.clickednow {background:#6E0420;  -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}
.morenav.hoveredhiatus {background:teal;  -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}
.morenav.clickedhiatus {background:teal;  -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}
.morenav.hoveredjean {background:#CFBE27 ; -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}
.morenav.clickedto {background:#CFBE27 ; -moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s;}
.morenav.hoveredfinished {background:#FA6900 ;-moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s; }
.morenav.clickedfinished {background:#FA6900 ;-moz-transition-duration:1s;

-webkit-transition-duration:1s;

-o-transition-duration:1s; }
javascriptcsstoggleaddclassremoveclass

Answer №1

Instead of relying solely on hovering, it is recommended to define both the handlerIn and handlerOut functions. You can find more information about this here: http://api.jquery.com/hover/ The issue with the code above is that it only considers when the mouse hovers over an element. While classes are removed upon hovering, they are not added back once the mouse moves away.

To address this, the code should be structured as follows:

$("#finished").hover(function() {
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredhiatus');
$(this).closest(".morenav").toggleClass("hoveredfinished")
}, function() {
$('.morenav').addClass('hoveredall hoverednow hoveredto hoveredhiatus');
$(this).closest(".morenav").toggleClass("hoveredfinished")
});

This structure should be applied wherever there is a hover effect needed.

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

Collapse all "Read More" buttons simultaneously using Bootstrap

I am attempting to design a segment that contains multiple paragraphs that can be expanded or collapsed individually. How can I achieve this using only pure bootstrap css so that they do not all expand and collapse simultaneously? #summary { font-size: ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing RSelenium for accessing a website built using the <td> element

My supervisor has tasked me with retrieving data from the China in-depth accident study database. Given my limited experience with HTML and javascript, I decided to utilize RSelenium and phantomjs to assist me in completing this task. Although I was able ...

javascripthtmlcssrselenium

Struggling to dynamically generate class names with clsx in combination with TailwindCss

Greetings! I am a JavaScript developer who is not very skilled yet, working with React and Next. Specifically, I am using this template When it comes to declaring component class names, I have been using a utility function that combines tailwind-merge and ...

javascriptreactjsnext.jstailwind-cssclsx

The knockout afterRender event triggers only on the initial rendering

Here is a basic ViewModel structure: export class ViewModel { public arr : KnockoutObservableArray<Dtos>; constructor() { this.arr = ko.observableArray<Dtos>(null); ko.applyBindings(this); this.init(); } ...

javascriptjquery-uiknockout.jsknockout-3.0

Employ the v-model directive in conjunction with a checkbox in scenarios where v-for is implemented with the properties of an object

When utilizing v-model with a checkbox in conjunction with an array of objects, it functions correctly: new Vue({ el: '#example', data: { names: [ { name: 'jack', checked: true }, { name: 'john', checked ...

javascripthtmlvue.jsvuejs2

Transform a two-element array into a single key/value pair JavaScript object

Looking to convert the array ["description", "asc"] into an object like this: { "description": "asc" } Any ideas on how to achieve this quickly? My attempt: const obj = { array[0] : array[1] } Struggling to dyna ...

javascriptnode.js

What is the best way to handle promises within the context of updating state in React

Recently, I've been working on a React code snippet focused on creating a text input field. onChangeDestination(url, index) { this.setState(prevState => { const rules = [...prevState.rules]; rules[index] = { ...rules[index], url}; ...

javascriptreactjs

Analyzing various field data collectively

Is there a way to use jQuery to compare multiple input field values and trigger an alert message saying 'There are similar values' if any match is found? <input value="111"> //similar <input value="222"> <input value="111"> //s ...

javascriptjquery

Identifying the camera model using getMediaStream

Are there methods available to determine if a user's device has a front, rear, or dual cameras installed? For instance, laptops typically only have a front-facing camera while some devices may have both. I am looking for a way to identify the type of ...

javascriptreactjstypescriptnext.js

During bundling, utilize an npm script to copy the package.json file to the dist directory

Currently, I am facing a challenge while trying to enhance my npm bundle script. Although the initial part is functioning smoothly, I am encountering difficulties in including three additional files along with the bundle. At present, my script looks like ...

javascriptnode.js

Having issues with the presentation of full_numbers pagination in IE while using jQuery dataTables

I am currently utilizing the DataTables jQuery plugin (found at ) with the initialization code below: $('#reconcile_table').dataTable( { 'bSort' : true, 'bFilter' : true, 'bSortClasses' : false, &a ...

jquerycsspaginationdatatables

placeholder for selecting a file

I'm struggling to replace "no file chosen" with "cv" on the file input field. I tried adding a placeholder, but it didn't work as expected. https://i.sstatic.net/wQqcS.png <div class="col-md-6 form-group "> ...

htmlcssbootstrap-4

Collapsed links not appearing in navbar toggler

Within my container-fluid cont, I am customizing my navigation bar using Bootstrap. The issue I am facing is that when I toggle the hamburger icon, nothing appears. My goal is for the navigation to collapse in mobile view, and upon clicking the toggler, t ...

jqueryhtmlcssbootstrap-4navbar

The deletion request using the form in Express is experiencing issues and not functioning properly

When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...

javascripthtmlnode.jsexpress

Having trouble with the Bootstrap 5 Modal? Discover how to ensure smooth functionality

How can I configure a Bootstrap 5 Modal to open only after clicking on a specific Navbar Dropdown item, without causing the whole website to be disabled and ensuring that all close buttons function correctly? <!doctype html> <html lang="en"> ...

htmljquerycssbootstrap-modalbootstrap-5

Exploring the possibilities of integrating jQuery into Firefox extensions

Can someone provide guidance on effectively implementing jQuery within a Firefox extension? My research has not yielded any up-to-date methods that address the latest version of jQuery, and I am aware that directly including it via script tag may lead to c ...

javascriptjqueryfirefoxfirefox-addonadd-on

Dealing with reactive form controls using HTML select elements

I am working with a template that looks like this: <form [formGroup]="form"> <mdl-textfield type="text" #userFirstName name="lastName" label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*" error-msg ...

javascripthtmlangularreactjstypescript

The function for the Protractor promise is not defined

UPDATE: After some troubleshooting, I believe I have identified the issue causing it not to work. It seems that I am unable to pass arguments along when calling flow.execute(getSpendermeldung). Does anyone have a better solution than wrapping the ApiCall i ...

javascriptselenium-webdriverpromiseprotractor

Using jQuery, identify when any of the elements within every function are missing

In my JavaScript file, I have the following code snippet: var aryYears= []; $(".year").each(function(){ aryYears.push($(this).val()); }) This allows me to pass an array of years as a parameter in the saveChanges function. I want to make ...

javascriptjqueryfunctionalerteach

Ensuring promise doesn't resolve until the IF STATEMENT is executed

I am encountering an issue with the "checkWorkflow" function where it seems to be executing the "If" statement before actually checking. This deduction is based on the output in my console, which makes me believe there might be a problem with how I am hand ...

javascriptnode.jsmongooserequest-promise