Javascript Jquery悬停在html中不起作用_Javascript_Jquery_Html_Css

Javascript Jquery悬停在html中不起作用

javascript jquery html css

Javascript Jquery悬停在html中不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的html页面： <!DOCTYPE html> <html> <head> <style> .navigation ul li { float: left; list-style: none; padding: 10px; margin-top: 10px; } .navigation ul

这是我的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>

我想将鼠标悬停在“设置颜色更改动画”对话框中，但它不起作用。

类似地，它也起作用。我不知道为什么？请帮助我

您正在导入jQuery，但没有导入jQuery UI。你这样做是在小提琴，但不是在你张贴在这里的代码

设置颜色动画需要jQueryUI。

这可以在纯CSS中完成：

至于为什么它不起作用，是因为设置颜色动画需要JQUERYU I See

您好，您可以使用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>

请把这篇文章发到一个JSFIDLE上。尖锐的答案正是你想要的。但是请，插入元标记字符集和其他基本的东西了。谢谢！但是我想使用Jquery。因为我需要在IE 7hey上显示！通过将这一行添加到head标记，我已经插入到jQueryUI库中，但仍然没有插入。确保已加载库-浏览器的网络控制台将告诉您这一点。您可能也应该加载较新版本的jQuery UI。如何确保库已加载jQuery？Sr，我是新手当您加载页面时，浏览器的“网络”选项卡将显示所有HTTP事务及其状态。您还应该检查开发人员控制台中的错误消息。谢谢您，但是css3转换不支持IE9和早期版本

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