Jquery 悬停 slideDown 和 fadeOut

Question

代码上的 css 工作正常，但 jquery 功能不工作我只需要当鼠标悬停在 div 上时，隐藏的 div因为 div 应该 slideDown，当它离开时应该 fadeOut。

<div class="col-md-12 services-content">
   <div class="services-pannel">
       <div class="services-in">
           <div class="services-hov">Learn More</div>
           <p> <img class="padtp" src="services-preventative.png"></p>
           <h4>PREVANTATIVE</h4>
           <p>
               Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .
           </p>
           <p></p>
       </div>
   </div>
   <div class="services-pannel">
       <div class="services-in">
           <div class="services-hov">Learn More</div>
           <p> <img class="padtp" src="services-restorative.png"></p>
           <h4>RESTORATIVE</h4>
           <p>
               Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .
           </p>
           <p></p>
       </div>
   </div>
</div>

这是css

.services-pannel{
    display:inline-block;
    width:225px;
    text-align:center;
    background-color:#a8d9e9;
    margin: 1px -1px;
    position: relative;
    height: 185px;
}
.services-in{
  position: absolute;
  width: 225px;
  height: 185px;
  cursor: pointer;
}
.padtp{padding-top: 20px;}
.services-hov{
  position: absolute;
  display: none;
  text-align: center;
  width: 225px;
  height: 185px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  padding-top: 88px;
}
.services-section-heading{
    color:#333;
    text-align:center;  
    margin-bottom:40px;
    font-size:24px;
    color:#666;
}
.heading-line-services{
    color:#666; 
}
.services-pannel p{
    font-size:0.8em;
    padding:0 20px;
}
.services-pannel h4{
    font-size:bold  ;
    color:#333;
}

和jquery

$(function(){
    $(".services-in").mouseover(function() {
        $(".services-hov").slideDown(400);
    });
    $(".services-hov").mouseout(function() {
        $(".services-hov").fadeOut(400);
    });
});

Jsfiddle

Answer 1

请在 JS Fiddle "Frameworks & Extensions" 中添加 jquery 版本。您的代码运行良好。

Answer 2

试试这个

$(function() {
  $(".services-in").mouseover(function(e) {
    $(this).children(".services-hov").slideDown(100);
  });
  $(".services-hov").mouseout(function(e) {
    $(".services-hov").fadeOut(500);
  });
});

.services-pannel {
  display: inline-block;
  width: 225px;
  text-align: center;
  background-color: #a8d9e9;
  margin: 1px -1px;
  position: relative;
  height: 185px;
}
.services-in {
  position: absolute;
  width: 225px;
  height: 185px;
  cursor: pointer;
}
.padtp {
  padding-top: 20px;
}
.services-hov {
  position: absolute;
  display: none;
  text-align: center;
  width: 225px;
  height: 185px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  padding-top: 88px;
}
.services-section-heading {
  color: #333;
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #666;
}
.heading-line-services {
  color: #666;
}
.services-pannel p {
  font-size: 0.8em;
  padding: 0 20px;
}
.services-pannel h4 {
  font-size: bold;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 services-content">
  <div class="services-pannel">
    <div class="services-in">
      <div class="services-hov">Learn More</div>
      <p>
        <img class="padtp" src="services-preventative.png">
      </p>
      <h4>PREVANTATIVE</h4>

      <p>Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .</p>
      <p></p>
    </div>
  </div>
  <div class="services-pannel">
    <div class="services-in">
      <div class="services-hov">Learn More</div>
      <p>
        <img class="padtp" src="services-restorative.png">
      </p>

      <h4>RESTORATIVE</h4>

      <p>Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .</p>
      <p></p>
    </div>
  </div>
</div>

Jquery 悬停 slideDown 和 fadeOut

Jquery hover slideDown and fadeOut

html

jquery

mouseout