---
title: "How to apply custom CSS on element on hover-in and hover-out in jquery?"  
description: "How to apply custom CSS on element on hover-in and hover-out in jquery?"  
author: "Anonymous User"  
published: 2018-03-18  
updated: 2018-03-18  
canonical: https://www.mindstick.com/forum/34440/how-to-apply-custom-css-on-element-on-hover-in-and-hover-out-in-jquery  
category: "c#"  
tags: ["jquery", "css"]  
reading_time: 1 minute  

---

# How to apply custom CSS on element on hover-in and hover-out in jquery?

Hi,

I want to [apply](https://www.mindstick.com/articles/13148/discover-to-apply-make-up-like-a-professional-supermodel) [custom CSS](https://www.mindstick.com/forum/34385/add-custom-css-in-razor-view) on [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) element on [mouse hover](https://answers.mindstick.com/qa/30760/how-to-change-div-color-on-mouse-hover-using-css)-in and hover-out from jquery.

```
<span>
     <input title="Click to submit" name="" onclick="return on_button_click(this);" type="submit" value="" class="btn-Submit">
 </span>
```

Please give me some idea to achieve this task.

## Replies

### Reply by Hemant Patel

Hi Filip,

You can achieve your task by this way.

Write following line code in jquery:

```
 $(".btn-fav").hover(function () {            $('.btn-fav').css("background-color", "red");        }, function () {            $('.btn-fav').css("background-color", "green");        });
```

I hope it's informative!!!


---

Original Source: https://www.mindstick.com/forum/34440/how-to-apply-custom-css-on-element-on-hover-in-and-hover-out-in-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.