Can a CSS hover effect transition modify the color scheme?

I have multiple buttons on a single page, and I want the hover effect to be applied to all of them with just one code using jQuery. Please review my code below.

$(document).ready(function(){
$('.button').hover(function(){
    var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    $(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});
.button {  
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  height:70px;
  width: 160px;
  margin: 5px;
  transition: all 0.5s;
  margin-right:30px;
}
.button:hover{
 transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

  <button class="button" style="background-color: red;">Hover </button>
  <button class="button" style="background-color: green;">Hover </button>
  <button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

The hover effect works well for individual buttons, but hovering continuously changes the color. Is there a way to prevent this and keep the color constant during hover?

javascriptjqueryhtmlcsshover

Answer №1

Replace all with transform in the css for your button class:

$(document).ready(function(){
$('.button').hover(function(){
    var bc=$(this).css('background-color');
      var cl=$(this).css('color');
    $(this).css({
         'background-color': cl,
         'color':bc
       });
           
   });
});
.button {  
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  height:70px;
  width: 160px;
  margin: 5px;
  transition: transform 0.5s;
  margin-right:30px;
}
.button:hover{
 transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

<button class="button" style="background-color: red;">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

Answer №2

$(document).ready(function(){
$('.button').hover(function(){
    var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    $(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});
.button {  
 color: #FFFFFF;
  text-align: center;
  font-size: 22px;
 height:70px;
  width: 160px;
  margin: 5px;
  transition: transform 0.5s;
  margin-right: 30px;
}
.button:hover{
 transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

<button class="button" style="background-color: red;">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

transition: transform 0.5s; What do you think about this?

Answer №3

Give the button an id

<button class="button" style="background-color: red;" id="specialButton">Hover </button>

Next, utilize jQuery to locate it by the assigned id

$('#specialButton').hover(function())


$(document).ready(function(){
$('#specialButton').hover(function(){
    var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    $(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});
.button {  
 color: #FFFFFF;
  text-align: center;
  font-size: 22px;
 height:70px;
  width: 160px;
  margin: 5px;
  transition: all 0.5s;
  margin-right:30px;
}
.button:hover {
 transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<button class="button" style="background-color: red;" id="specialButton">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

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

Display notification following successful data saving in CodeIgniter

I attempted to set up a notification to appear when saving data and displaying it in the view, but it didn't work as expected using notify.js. Can someone offer some assistance? This is my save function: function save() { $data = array( ...

javascriptphptwitter-bootstrapcodeigniter

Trouble encountered while setting up Firebase Auth for React Native by utilizing AsyncStorage

Trying to implement SMS authentication via Firebase has presented some challenges for me. Despite poring over the documentation and scouring Google for solutions, I've hit a dead end. My setup is pretty basic - just a single input field and a "Send" b ...

javascriptreactjsreact-nativefirebase-authentication

What steps can be taken to address the error message "FATAL: Unable to load template" encountered while using

I'm encountering the issues documented here and here on GitHub. I'm working on incorporating documentation for my Next.js code, and below is my jsdoc configuration file. { "tags": { "allowUnknownTags": true, "di ...

javascriptnode.jsreactjsnext.jsjsdoc3

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? https://i.sstatic.net/0UD0s.png Bel ...

javascripthtmlcanvas

Tips for refreshing a live ajax call to animate a circle

Currently, I am utilizing the gaugeMeter plugin to dynamically display the CPU usage of my elasticSearch Host. While the values are being displayed correctly, there seems to be an issue with the animation of the gauge/circle itself. Instead of the indicato ...

javascriptjqueryajaxapielasticsearch

Error message encountered when submitting a form after receiving an AJAX response: VerifyCsrfToken Exception

I'm encountering an issue with my AJAX functionality that involves rendering a form with multiple input fields and a submit button. Here is the AJAX call: <script type="text/javascript"> $('#call_filter').click(function() { $.aja ...

javascriptphpjqueryajaxlaravel

Trouble with HTML img srcset functionality?

I'm currently working on implementing responsive images, and while everything seems to be functioning correctly in the latest version of Firefox, I'm encountering issues with Safari and Chrome. <img src="/images/pages/arrivals/02_exterio ...

htmlimageresponsive-designsrcset

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Guide on inputting information into a dual-column table where one column is linked to the other

After successfully inserting data with hardcoded values to verify the relation between the 2 columns, I am now wondering if there is a way to reference the value of id in reply_id. This is how I manually inserted data: const { data, error } = await su ...

javascriptnext.jssupabase

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

Animations within Angular components are being triggered even after the parent component has been removed from

When a child component has an animation transition using query on mat-table rows, hiding the parent component will now trigger the child animation. To see this in action, check out this reproduction scenario: https://codesandbox.io/s/intelligent-jasper-hz ...

javascriptangularanimationangular-animations

I'm having trouble getting this demo to run on my computer using three.js and cannon.js on the sandbox platform

Check out this demo link, even though I have all the dependencies, it still shows that some modules are missing: https://tympanus.net/codrops/2020/02/11/how-to-create-a-physics-based-3d-cloth-with-cannon-js-and-three-js/ Does anyone know how to code this ...

javascriptthree.jsgsapcannon.jssimplex-noise

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

The deprecated body parser is throwing an error due to the lack of the extended option

I am encountering an issue with my code and I'm not sure how to resolve it. Since I am new to the codebase, I feel completely lost and clueless about what steps to take. body-parser deprecated undefined extended: provide extended option index.js:20:2 ...

javascriptnode.jsnpm

Error message "Module not found in Vue" occurs when changing image URL to an online image

I am currently working on a dynamic image display feature where I retrieve image names as strings from a backend. To manage a large number of images, I plan to store them online while maintaining the same logic for displaying them. Previously, I achieved t ...

javascripthtmlvue.js

What is the best way to incorporate the PUT method...?

Within the realm of programming, there exist three distinct files with specific roles - profiles.model.js, profiles.controller.js, and profiles.router.js. The focus now shifts towards implementing the PUT method across these three files. To begin, profiles ...

javascriptnode.jsmongodbexpress

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

Add styling to a window popup and close it when focus is lost in Ext JS

I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead ...

javascriptcssextjstextboxpopover

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

javascriptcssreactjs

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss