jQuery的悬停无法在HTML工作

Question

这是我的html页面：

 <!DOCTYPE html>
    <html>
     <head>
    <style>
      .navigation ul li {
          float: left;
          list-style: none;
          padding: 10px;
          margin-top: 10px;
      }
          .navigation ul li a {
             display: block;
             text-decoration: none;
             font-weight: bold;
          }         
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>
    <script>
     $(document).ready(function(){
       $(".navigation ul li a").hover(function(){
          $(this).animate({ color: 'blue'}, "slow");
       }, function() {
          $(this).animate({ color: 'red'}, "slow");
       });
         });
    </script>
    </head>
    <body>
        <div class="navigation">
       <ul>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Fruits &amp; Veg</a></li>
            <li><a href="#">Food Products</a></li>
            <li><a href="#">Locate store</a></li>
            <li><a href="#">Fan Club</a></li>
        </ul>
    </div>
    </body>
    </html>

我想将动画悬停在颜色上，但是它不起作用。 同样，在这里，它起作用。 我不知道为什么？ 请帮我

Answer 1

您正在导入jQuery，但没有导入jQuery UI。 您这样做只是在摆弄，而不是在此处发布的代码中。

动画颜色需要jQueryUI。

Answer 2

这可以在纯CSS中完成：

JsFiddle

.navigation ul li a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  transition:color 1s;
  -webkit-transition:color 1s;
  -moz-transition:color 1s;
  color:#f00;
}    

.navigation ul li a:hover{
    color:#00f;
}

至于为什么它不起作用，是因为动画颜色需要jQueryUI（请参阅Pointy 的答案）

Answer 3

嗨，您可以使用css3过渡示例，您可以尝试以下操作：

<!DOCTYPE html>
<html>
 <head>
<style>
  .navigation ul li {
      float: left;
      list-style: none;
      padding: 10px;
      margin-top: 10px;
  }
      .navigation ul li a {
         display: block;
         text-decoration: none;
         color:blue;
         font-weight: bold; transition:1s;
      } 
    .navigation ul li a:hover {color:red;} 

</style>
</head>
<body>
    <div class="navigation">
   <ul>
        <li><a href="#">Specials</a></li>
        <li><a href="#">Fruits &amp; Veg</a></li>
        <li><a href="#">Food Products</a></li>
        <li><a href="#">Locate store</a></li>
        <li><a href="#">Fan Club</a></li>
    </ul>
</div>
</body>
</html>

jQuery的悬停无法在HTML工作

问题描述

3 个解决方案

解决方案1
5 已采纳 2014-05-20 13:09:43

解决方案2
2 2014-05-20 13:13:37

解决方案3
0 2014-05-20 13:29:00

jQuery的悬停无法在HTML工作

问题描述

3 个解决方案

解决方案1 5 已采纳 2014-05-20 13:09:43

解决方案2 2 2014-05-20 13:13:37

解决方案3 0 2014-05-20 13:29:00

解决方案1
5 已采纳 2014-05-20 13:09:43

解决方案2
2 2014-05-20 13:13:37

解决方案3
0 2014-05-20 13:29:00