Question

我有一个投资组合网站即将完成，我只需要让JS滑动在位于容器上方的div中即可显示一些额外的信息，并有一个按钮可以在新页面中查看工作。我可以使用它，但是它显示的是每件作品的所有信息，而不是一件作品。现在，当我尝试调试它时，它已完全停止。任何帮助都将继续，这已经是一个非常紧张的早晨。

我已经尝试过悬浮标签的CSS方法，但是更喜欢JS脚本编写方式。直到我尝试修复错误后，这种方法还是可行的，但是由于我已经回到了我使用的原始代码，因此我无法解决为什么它什么也不会做的事情。

$(".work_hub").mouseover(function() {
  $(".work_hover_info").slideUp();
});
$(".work_hub").mouseleave(function() {
  $(".work_hover_info").slideDown();
});

.movement_hover {
  margin-top: 913px;
}

.movement_hover1 {
  margin-top: calc(912.5px * 2);
}

.movement_hover2 {
  margin-top: calc(912.5px * 3);
}

.wrapper {
  text-align: center;
}

.work_container {
  display: inline-block;
  position: relative;
  width: 1200px;
  height: 100%;
  text-align: center;
}

.work_hover_info {
  background: #000000;
  width: 800px;
  height: 600px;
  position: absolute;
  opacity: .7;
  display: inline-block;
  top: 260px;
  right: 200px;
  z-index: 1000;
  text-align: center;
  display: none;
}

.work_hover_title {
  margin-top: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  display: inline-block;
}

.work_hover_description {
  margin-top: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
}

.work_hover_button {
  text-align: center;
  width: 80px;
  height: 30px;
  display: inline-block;
  margin-top: 350px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  border-radius: 20px;
  -moz-border-radius: 70px 70px 70px 70px;
  -webkit-border-radius: 70px 70px 70px 70px;
  border: 2px solid #ffffff;
}

.work_hover_button:hover {
  text-align: center;
  width: 80px;
  height: 30px;
  display: inline-block;
  margin-top: 350px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  border-radius: 20px;
  -moz-border-radius: 70px 70px 70px 70px;
  -webkit-border-radius: 70px 70px 70px 70px;
  border: 2px solid #ffffff;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
}

.view_work {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 400;
  display: inline-block;
  margin-top: 5px;
}

.work_title {
  margin-top: 20px;
  display: inline-block;
  width: 400px;
  height: 30px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
}

.work_hub {
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 50px;
  -webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
  box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="wrapper">
    <div class="work_container">
      <div>
        <div class="work_hover_info">
          <h1 class="work_hover_title">Placement Title</h1>
          <h2 class="work_hover_description">Write some info about the piece and why you designd this piece</h2>
          <div class="work_hover_button">
            <h2 class="view_work">View</h2>
          </div>
        </div>
        <h1 class="work_title">Logo Visualisation</h1>
        <img class="work_hub" src="../assets/work-one.png" height="auto" width="800" alt="Work Image">
      </div>
      <div>
        <div class="work_hover_info movement_hover">
          <h1 class="work_hover_title">Placement Title</h1>
          <h2 class="work_hover_description">Write some info about the piece and why you designd this piece</h2>
          <div class="work_hover_button">
            <h2 class="view_work">View</h2>
          </div>
        </div>
        <h1 class="work_title">Rock Banner</h1>
        <img class="work_hub" src="../assets/work-two.png" height="auto" width="800" alt="Work Image">
        <div>
          <div class="work_hover_info movement_hover1">
            <h1 class="work_hover_title">Placement Title</h1>
            <h2 class="work_hover_description">Write some info about the piece and why you designd this piece</h2>
            <div class="work_hover_button">
              <h2 class="view_work">View</h2>
            </div>
          </div>
          <h1 class="work_title">Forest Fire</h1>
          <img class="work_hub" src="../assets/work-three.png" height="auto" width="800" alt="Work Image">
          <div>
            <div class="work_hover_info movement_hover2">
              <h1 class="work_hover_title">Placement Title</h1>
              <h2 class="work_hover_description">Write some info about the piece and why you designd this piece</h2>
              <div class="work_hover_button">
                <h2 class="view_work">View</h2>
              </div>
            </div>
            <h1 class="work_title">Beach Body</h1>
            <img class="work_hub" src="../assets/work-four.png" height="auto" width="800" alt="Work Image">!-->
          </div>
        </div>
</main>

Answer 1

尝试此脚本

    $(document).ready(function(){
     $(".work_hub").mouseover(function() {
      $(this).siblings( ".work_hover_info" ).slideUp();
     });
    $(".work_hub").mouseleave(function() {
         $(this).siblings( ".work_hover_info" ).slideDown();
     };
   });
  });

Answer 2

在脚本下面添加此代码：并且只在脚本中犯了一个错误。

$(document).ready(function(){
    $(".work_hub").mouseenter(function() {
        $(".work_hover_info").slideDown();
    });
    $(".work_hub").mouseleave(function() {
        $(".work_hover_info").slideUp();
    });
});

您在以下脚本中记录了错误：

   $(".work_hub").mouseleave(function() {
         $(this).siblings( ".work_hover_info" ).slideDown();
     };
   });

在脚本上方，您已经在第三行上添加了额外的关闭符号，我在上面向您显示了该符号...删除它。

Answer 3

您遇到问题的原因是由于对jQuery（而非JS）的工作方式有一个简单的误解。我第一次是这样，一旦我弄清楚了，它会使很多事情变得容易。

您当前的JS：

$(".work_hub").mouseover(function() {
  $(".work_hover_info").slideDown();
});
$(".work_hub").mouseleave(function() {
  $(".work_hover_info").slideUp();
});

$()的工作方式是获取符合()中所有内容的所有 html元素列表。因此，适当地，您希望所有.work_hubs都具有鼠标悬停功能。这里的问题是在鼠标悬停功能中，您$(".work_hover_info")。请记住，它会全部 .work_hover_info。这就是为什么它扩展了所有人的原因。幸运的是，此问题很容易解决。您只需要限制结果即可...您真正想要的只是悬停的.work_hover_info中的.work_hub。

在事件监听器上：

mouseover函数称为事件侦听器。关于jQuery中的事件侦听器的一件好事是，您可以知道使用特殊单词this触发了哪个元素。但是this只是一个元素，并没有为您提供出色的jQuery函数。您可以始终将this粘贴在jQuery中，如下所示：$(this)，现在使用它进行一些很酷的jQuerying。这就是其他答案起作用的地方。

// Wait until the document is ready...
$(document).ready(function(){
  // Add a listener to all .work_hubs
  $(".work_hub").mouseover(function() {
    // Find MY .work_hover_info and tell it to slide down.
    $(this).siblings( ".work_hover_info" ).slideDown();
  });

// Add another listener to all .work_hubs
  $(".work_hub").mouseleave(function() {
    // Find MY .work_hover_info and tell it to slide down.
    $(this).siblings( ".work_hover_info" ).slideUp();
  });
});

此处的关键是使用$()，this（正在悬浮的work_hub）和.siblings()。由于每个.work_hub只有一个.work_hover_info，因此在同级兄弟中寻找它会很完美。因此，$(this).siblings('.work_hover_info')：

获取引发事件的元素的jQuery版本
获取该元素的所有同级元素.work_hover_info

然后对所有对象触发适当的方法。但是，由于每个<div>只有一个，因此一切顺利。这是fully working example，仅将您的HTML和CSS代码与经过调整的JS一起使用。您必须向左滚动或展开结果框才能看到它。

为什么JS不单独定位我的课程？

3 个答案: