Question

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle1.css">
  <title>hd images</title>
</head>

<body>
  <div id="top1">
    <div class="inside1">
      <div class="nested_inside1"> MY HAPPY PLACES </div>
    </div>
    <div class="inside2">
      <div class="nested_inside2"> CLUMSSY BEACHES
      </div>
    </div>
    <div class="inside3">
      <div class="nested_inside3"> REGULAR APPLES </div>
    </div>
    <div class="inside4">
      <div class="nested_inside4"> LUSTY BRUSHES </div>
    </div>
    <div class="inside5">
      <div class="nested_inside5"> ECSTATIC DIMENSIONS </div>
    </div>
    <div class="inside6">
      <div class="nested_inside6"> CURLY HILLS </div>
    </div>
    <div class="inside7">
      <div class="nested_inside7"> SHINY WATER </div>
    </div>
    <div class="inside8">
      <div class="nested_inside8"> COOL BOATS </div>
    </div>
    <div class="inside9">
      <div class="nested_inside9"> CRUNCHY CLUSHTERS </div>
    </div>
    <script type="text/javascript" src="myscript2.js"></script>
</body>

</html>

的JavaScript

$(document).ready(function() {
  $("#top1").on("hover", ".nested_inside", function() {
    $(this).animate({
      "top": "-10px"
    });
  });
});

Answer 1

这不起作用，因为你没有班级nested_inside但是nested_inside1，ensted_inside2 ......等等......你必须删除这些数字

为每一个人改编它：

<div class="inside7">
  <div class="nested_inside"> SHINY WATER </div>
</div>

你还需要在脑中包含jquery：

<script src="path/to/jquery.js"></script>

像这样修改你的代码：

 $(document).ready(function() {
  $("#top1").on("mouseover", ".nested_inside", function() {
     $(this).animate({
    "top": "-10px"
    }); 
  });
 });

和你的CSS一样：

.nested_inside {
  position: relative;
}

工作小提琴：https://jsfiddle.net/jnb7p14o/2/

Answer 2

 <head>
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script type="text/javascript" src="myscript2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle1.css">
<title>hd images</title>
</head>

您需要在<head>中添加指向jquery文件的链接，然后再添加您的jquery文件。

Answer 3

这有两个固有的问题：

CSS - 添加位置：相对于.nested_inside以确保top属性有效
悬停事件已从jQuery 1.8中删除。如果您使用的是最新版本的jQuery，则需要将其替换为mouseenter和mouseleave并执行必要的动画

我根据我应该如何运作的假设添加了一个小提琴： https://jsfiddle.net/fxmtz2yn/

$(document).ready(function() {

 $("#top1").on("mouseover mouseleave", ".nested_inside",function(evt) {
    var $el = $(this),
        top = $el;
    switch(evt.type) {
        case "mouseover": 
            $el.animate({
                "top": "-10px"
            });
            break;
        case "mouseleave": 
           $el.animate({
               "top": "0"
           });
           break;
    }   
  });
});

Answer 4

\e

hover（）需要回调

div animate not working jquery

4 个答案: