JQuery mouseover is called - but can't change any CSS element

Question

I have a small test website with two DIVS of class "gc-navbar-btn". See image: enter image description here

I've been trying to change the background to black when the mouse hovers. I know the mouseover function is called as my "alert" test works. But nothing I do has any effect on the "backgroundColor" (also tried "background-color", "background") nothing works. no effect. What am I doing wrong?

$(document).ready(function(){

$('.gc-navbar-btn').mouseover(function () {
    $(this).animate({'backgroundColor': '#000000'}, 300); <<---- DOES NOTHING
    alert("test");  <-- WORKS- REACHES HERE!

});

$('.gc-navbar-btn').mouseleave(function () {
    $(this).animate({'background-color': 'transparent'}, 300);

});

});

I know. but this is really experimental code -- forget this is a button -- this is a DIV that needs to animate its background color when hovered on. What's wrong with my code? — JasonGenX, Apr 20 '15 at 21:42
By default jQuery animate doesn't support colors: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — HJ05, Apr 20 '15 at 21:44

Jonathan · Answer 1 · 2015-04-20T21:52:49.327

1

CSS

.gc-navbar-btn {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: blue;
      transition: background-color 1000ms;
    }

    .gc-navbar-btn:hover {
      background-color: red;
    }

<div class="gc-navbar-btn"></div>

edited Apr 20 '15 at 21:52

answered Apr 20 '15 at 21:39

Jonathan

8,771
4
41
78

OP would probably want to transition on this change. – Derek Apr 20 '15 at 21:41
You should add a bit more explanation rather than just code. – OneHoopyFrood Apr 20 '15 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

Do you really want to do this with JS? You could use this css for this task and it would be far more semantic:

.gc-navbar-btn {
  padding: 5px 15px;
  border: 1px solid #000;
  border-radius: 3px;
  background-color: transparent;
  /* Make the color fade slowly instead of suddenly (modern browsers only) */
  transition: background-color: 3000ms;
}
.gc-navbar-btn:hover {
  background-color: #000;
}

<button class="gc-navbar-btn">Login</button>
<button class="gc-navbar-btn">Sign Up</button>

If you really need to use JS (and as far as I can tell, you don't) the issue is that you're trying to use animate to change a color gradually and jQuery alone doesn't do that. You'd need a plugin.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 20 '15 at 21:42

OneHoopyFrood

3,829
3
24
39

How new does a browser have to be to support this? will IE8 work with this? – JasonGenX Apr 20 '15 at 21:48
1

But please be aware, unless you HAVE to support ie8 (and I'm sorry if you do) you **shouldn't**. It's dieing, let it. http://www.theie8countdown.com/ – OneHoopyFrood Apr 20 '15 at 21:54

Jose Ricardo Bustos M. · Accepted Answer · 2015-04-20T21:51:53.430

0

you should add jquery-ui.js library, for color animation

$(document).ready(function(){

$('.gc-navbar-btn').mouseover(function () {
    $(this).animate({
      backgroundColor: '#000000',
      color: '#FFFFFF',
    }, 300);
    //alert("test");

});

$('.gc-navbar-btn').mouseleave(function () {
    $(this).animate({
      'background-color': 'transparent',
      color: '#000000'
    }, 300);

});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="gc-navbar-btn">Hello World</div>

edited Apr 20 '15 at 21:51

answered Apr 20 '15 at 21:44

Jose Ricardo Bustos M.

8,016
6
40
62

Guys, why are you flagging this down? Isn't it what I needed (adding jquery-ui) it worked perfectly when I added it to my code. – JasonGenX Apr 20 '15 at 21:46
Give a man a hammer, and he can fish for a day... Teach him CSS and he can make animating background colors all day long. – Jonathan Apr 20 '15 at 21:48
1

I understand and prefer CSS -- but can it work on older browsers such as IE8? – JasonGenX Apr 20 '15 at 21:49
I'm using JQuery 1.9 -- it's a prerequisite that what I do has to work on older browsers as well. – JasonGenX Apr 20 '15 at 21:56

score 0 · Answer 4 · answered Apr 20 '15 at 21:46

0

Ok. I was missing something :

jquery-ui.min.js

I only used the query minimum...

once added -- it started working.

answered Apr 20 '15 at 21:46

JasonGenX

4,952
27
106
198

1

Glad you got it working, but this really isn't how you should do this. – OneHoopyFrood Apr 20 '15 at 21:46

score 0 · Answer 5 · edited Apr 20 '15 at 22:02

By default jQuery.animate() doesn't support color transitions. There are several plug-ins that add this feature to jQuery for example jQuery.color or jQueryUI

In the following example I used jQuery.color

$('.gc-navbar-btn').mouseover(function () {
    $(this).animate({'backgroundColor': '#000000', 'color': '#FFFFFF'}, 300);

});

$('.gc-navbar-btn').mouseleave(function () {
    $(this).animate({'background-color': 'transparent', 'color':'#000000'}, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

<div class="gc-navbar-btn">Login</div>

JQuery mouseover is called - but can't change any CSS element

5 Answers5