调用JQuery鼠标悬停 - 但不能更改任何CSS元素

Question

我有一个小型测试网站，有两个DIVS类＆＃34; gc-navbar-btn＆＃34;。见图：

当鼠标悬停时，我一直试图将背景改为黑色。我知道鼠标悬停功能被称为我的＆＃34;警报＆＃34;测试工作。但我所做的一切都没有对＆＃34; backgroundColor＆＃34; （也试过＆＃34;背景颜色＆＃34;，＆＃34;背景＆＃34;）没有效果。没有效果。我究竟做错了什么？

$(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);

});

});

Answer 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>

Answer 2

你真的想用JS做这件事吗？您可以将此css用于此任务，它将更多semantic：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你真的需要使用JS（而且据我所知，你不会）问题是你正在尝试使用animate来逐渐改变颜色而jQuery本身并没有＃39这样做。您需要plugin。

Answer 3

你应该添加jquery-ui.js库，用于颜色动画

＆＃13;

＆＃13;

$(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);

});

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

确定。我错过了一些东西：

的jquery-ui.min.js

我只使用查询最小值...

一旦添加 - 它就开始工作了。

Answer 5

默认情况下jQuery.animate()不支持颜色过渡。有几个插件可以将此功能添加到jQuery，例如jQuery.color或jQueryUI

在以下示例中，我使用了jQuery.color

＆＃13;

＆＃13;

$('.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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;