面板使用jQuery中的mouseover，mouseout事件

Question

我刚刚开始学习jQuery，我编写了这段代码以创建一个面板，该面板基本上在鼠标悬停时显示新的div元素。但是，div元素在一次鼠标悬停时被触发（上下滑动）多次。可能是什么原因？

//script for project web
$(document).ready(function() {
  $("div#web").bind("mouseover, mouseenter", function() {
    $(this).find(".hover-web").slideDown();
    $("#actionImageWeb").slideUp();
    $(".title-web").slideUp();
  }).bind("mouseout, mouseleave", function() {
    $(this).find(".hover-web").slideUp();
    $("#actionImageWeb").slideDown();
    $(".title-web").slideDown();
  });
});

//script for project training
$(document).ready(function() {
  $("div#training").bind("mouseover, mouseenter", function() {
    $(this).find(".hover-training").slideDown();
    $("#actionImageTraining").slideUp();
    $(".title-training").slideUp();
  }).bind("mouseout, mouseleave", function() {
    $(this).find(".hover-training").slideUp();
    $("#actionImageTraining").slideDown();
    $(".title-training").slideDown();  
  });
});

//script for project workshop
$(document).ready(function() {
  $("div#workshop").bind("mouseover, mouseenter", function() {
    $(this).find(".hover-workshop").slideDown();
    $("#actionImageWorkshop").slideUp();
    $(".title-workshop").slideUp();
  }).bind("mouseout, mouseleave", function() {
    $(this).find(".hover-workshop").slideUp();
    $("#actionImageWorkshop").slideDown();
    $(".title-workshop").slideDown();
  });
});

.services-main {
  background-color: #f3efef;
  width: 1000px;
  height: 150px;
  margin-left: 140px;
  float: left;
  box-shadow: 1px 1px 1px #ccc;
  position: relative;
}

img {
  height: 60px;
  width: 60px;
}

.services-title {
  margin-top: 10px;
}

.common {
  display: inline-block;
  padding-left: 90px;
  padding-right: 90px;
  padding-bottom: 5px;
  padding-top: 30px;
  text-align: center;
}

.clear {
  clear: both;
}

.hover {
  height: 150px;
  background-color: white;
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="services-main">
  <div id="project" class="project common"><img id="actionImageProject" src="project.png">
    <div class="title-project services-title">Projects</div>
    <div class="hover-project hover">
      Lorem, ipsum dolor sit<br> amet consectetur adipisicing elit.
    </div>
  </div>
  <div id="web" class="web common"><img id="actionImageWeb" src="web-programming.png">
    <div class="title-web services-title">Web</div>
    <div class="hover-web hover">
      Lorem, ipsum dolor sit<br> amet consectetur adipisicing elit.
    </div>
  </div>
  <div id="training" class="training common"><img id="actionImageTraining" src="training.png">
    <div class="title-training services-title">Training</div>
    <div class="hover-training hover">
      Lorem, ipsum dolor sit<br> amet consectetur adipisicing elit.
    </div>
  </div>
  <div id="workshop" class="workshop common"><img id="actionImageWorkshop" src="presentation.png">
    <div class="title-workshop services-title">Workshop</div>
    <div class="hover-workshop hover">
      Lorem, ipsum dolor sit<br> amet consectetur adipisicing elit.
    </div>
  </div>
</div>
<div class="clear"></div>
<script type="text/javascript">
  $(document).ready(function() {

    $("div#project").bind("mouseover, mouseenter", function() {


      $(this).find(".hover-project").slideDown();
      $("#actionImageProject").slideUp();
      $(".title-project").slideUp();

    }).bind("mouseout, mouseleave", function() {

      $(this).find(".hover-project").slideUp();
      $("#actionImageProject").slideDown();
      $(".title-project").slideDown();

    });

  });
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>

</html>

我希望只有当我们将鼠标悬停在四个面板上并且不会被彼此干扰时，才会触发四个面板。

这是我尝试过的：https://codepen.io/anon/pen/XwQBKR