Switch background and disable hover effect with a click

I'm facing some issues with JavaScript and I can't seem to solve the problem on my own. What I want is, when I click on #footerblock, for the background of #footerblock to change, and then for the footer to lose its "hover effect".

<script>
/* I want the footer to still be there but without a hover effect */

</script>
<footer class="hover">
   <center>
      <table id="footer"></table>
      <a href="">Developer</a>&nbsp; &nbsp;<a href="">Privacy Policy</a>
      <a href="">Terms and Conditions</a>&nbsp; &nbsp;<a href="">Usage Terms</a>&nbsp; &nbsp;
      <a href="">Partners</a>
   </center>
</footer>
<span onClick="block()" id="footerblock"></span>

I believe my CSS is not relevant, but it's all packed in there.

FIDDLE

Apologies for my English

javascriptjqueryhtmlcsshover

Answer №1

perhaps this could be useful: http://fiddle.jshell.net/8F6xG/5/

$(document).ready(function(){
    $('#footerblock').on('click',function(){
        $('footer.hover').toggleClass('andClicked');
    });
});

also included this css line at line 40 

footer.hover.andClicked,

Answer №2

If you're using jQuery, you can achieve the desired effect by following the steps below.

Essentially, what we're doing is toggling classes on the #footerblock element when it's clicked. By adding and removing classes, we ensure that the existing hover class is removed to prevent the :hover style from being applied.

Additionally, we're also toggling a block_clicked class to change the background-color of the #footerblock.

jQuery:

$(document).ready(function () {
    $('#footerblock').on('click', function() {
        $('footer').toggleClass('clicked'); // toggle new class for background color change
        $('footer').toggleClass('hover'); // toggle hover class to remove ':hover' styling
        $(this).toggleClass('block_clicked'); // add custom style for block when clicked
    });
});

CSS:

.clicked{
    background-color: blue;
}

#footerblock.block_clicked{
    background-color: red;
}

See Demo Fiddle

EDIT (Updated based on MLeFevre's comment): Revised the css rule to #footerblock.block_clicked to eliminate the need for !important.

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

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

Difficulty arises with a simple click, resulting in two separate form submissions

I am aiming for the user to complete one form and utilize JavaScript to post the form into two different places. To achieve this, I have created a JSFiddle found here. On my website, there is a single form with an input[type='submit'] button. U ...

jqueryajaxformspost

Unable to submit Rails ajax form from embedded location

I am facing an issue with my Rails 3.2 ajax form that is used to create a new Room for a Hotel. The problem arises when I embed the new Room ajax form on a Hotel edit page - it seems to be submitting the form normally without utilizing Ajax functionality. ...

ruby-on-railsajaxjqueryruby-on-rails-3.2

It seems like there could be an issue with the CSS file not properly connecting to the HTML, or possibly the Jumbotron is not allowing the

Need help with text color! Trying to set h1 element to #513271, but it's not working. Check out my code and failed solutions below. CSS saved as stylesheet.css in same folder as tributePage.html. jumbotron h1 { color: #513271; } <link rel="st ...

htmlcssbootstrap-4

Issue with table not remaining inside the div on the content page of WordPress site

I am having trouble with a div on my website. When I include a table in one div it resizes perfectly, but when I do the same in another div using a different template, it doesn't work as expected. To see the issue, please visit: Home page, bottom lef ...

phphtmlcsswordpressblogs

Angular is used to call a function that captures a specific div and then waits for the capture to be completed before

I'm facing a challenge where I need to handle the capturing of a div using a method called capture() within another method. Take a look at the code snippet below: theimage; // declaring the variable callcapture() { // perform certain actions t ...

javascriptangulartypescript

"The process of updating a div with MySQL data using Socket.io on Node.js abruptly halts without any error message

Embarking on a new project using socket.io has been quite the learning experience for me as a beginner. Despite extensive research, I managed to reach the desired stage where I have divs dynamically populated with data fetched from MySQL. In my server.js f ...

javascriptjquerymysqlnode.jssocket.io

Encountered an error with the opcode during deployment of migrations

Encountering an error while running the truffle migration command, despite trying several solutions without success. PS C:\Users\Jatin\OneDrive - nsut.ac.in\Desktop\Truffle\web> truffle migration Compiling your contracts... ...

javascriptsolidityweb3jstruffleopcode

Most effective method for utilizing Ajax to upload files and ensuring they are uploaded before submission

I am currently working on a form that contains various fields, including file upload functionality for multiple files. I have also explored the option of using AJAX to upload files. My goal is to seamlessly upload files via AJAX while simultaneously fillin ...

javascriptphpjqueryajaxlaravel

Update object properties in Angular controller dynamically

Take a look at my simple plunker Within the code, I am attempting to link a scope variable to an object property. $scope.name = 'World'; var obj = { "name":$scope.name } $scope.$watch('name', function(){ console.log(obj["name"]); ...

javascriptangularjs

Constance in JavaScript

Looking to create constants in Javascript and seeking advice on the best way to do so. While I am aware that true constants don't technically exist, I'm finding it difficult to change values after exporting them. Are constants necessary? Is the ...

javascriptnode.js

Creating a Duplicate of the Parent Element and its Child Elements using jQuery

Here is a code snippet I have that adds a new paragraph when a button is clicked. Currently, the script clones the "sub" div and appends it to the "main" div. However, the issue is that it only copies the content of the "inner" div within the "sub" div ins ...

javascriptjqueryhtmlfunction

Tips for sending an Ajax request to a separate URL on the same server

When making an ajax request to my server, I use the following code: var data = ''; $.ajax({ type: 'GET', url: 'api/getnews/home/post/'+title, data: data, datatype: 'json', success: f ...

javascriptjquerydjangoajaxget

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...

javascripthtmlthree.jsaframe

Unable to establish connection via web socket with SSL and WSS in JavaScript

Below is the code I used to implement web socket: try { console.log('wss://' + hostname + ':' + port + endpoint); webSocket = new WebSocket(webSocketURL); webSocket.onmessage = function (event) { //c ...

javascriptphpsslwebsocketwss

The ReactJS redirect URL is constantly changing, yet the component fails to load

I recently started using reactjs and I encountered an issue with routing from an external js file. Here is the code in my navigation file, top-header.js import React from 'react'; import {BrowserRouter as Router, Link} from 'react-router-do ...

javascriptreactjs

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js

I could use some help understanding how to identify the parent file so I can elevate a state

I'm facing a challenge in lifting up a state so that I can utilize it across various pages. The confusion lies in determining where to reference the states, given the uncertainty regarding the parent location. Since this is my first attempt at designi ...

javascriptreactjsreact-nativereact-context

Issue arises with asynchronous function outside of mounted lifecycle hook in VueJS

Identifying the Issue I encountered an issue while trying to create an external async function and assign its return value directly to a state variable. In addition, I passed firebase reference and store to this function to avoid importing them again in t ...

javascriptvue.jsasync-awaitvue-componentvuejs3

Whenever I add a new Task in React.js, the date is not visible to me

I'm currently deepening my understanding of React, and I've encountered a roadblock. The issue arises when I attempt to create a Tracking Task - the task is successfully created from the form inputs but the date associated with the new task isn&a ...

javascriptreactjsfrontendjsx