尝试使用 jquery 让 iframe 在 mouseenter 弹出 div 中工作

Question

我创建了一个小提琴来展示我的问题。但基本上我有一个弹出 div，里面有一个视频。但是，当您将鼠标悬停在 iframe 上时，我猜它认为这被认为是 mouseout 并关闭了窗口。我怎样才能让它保持开放和互动？ http://jsfiddle.net/qjm0vr1b/

$(".link_comm").css('display', 'none');
$(".link_store").css('display', 'none');
$(".link_tower").css('display', 'none');

$('a.comm').mouseenter(function() {
  $('.link_store').fadeOut("slow", function() {
    $('.link_comm').fadeIn("slow");
  });
  $('.link_tower').fadeOut("slow", function() {
    $('.link_comm').fadeIn("slow");
  });
  $('.link_comm iframe').hover(function() {
    $(this).parent().find('a').fadeIn();
  });
});

$('a.store').mouseenter(function() {
  $('.link_comm').fadeOut("slow", function() {
    $('.link_store').fadeIn("slow");
  });
  $('.link_tower').fadeOut("slow", function() {
    $('.link_store').fadeIn("slow");
  });
});

$('a.tower').mouseenter(function() {
  $('.link_store').fadeOut("slow", function() {
    $('.link_tower').fadeIn("slow");
  });
  $('.link_comm').fadeOut("slow", function() {
    $('.link_tower').fadeIn("slow");
  });
});

$('.link_comm, .link_store, .link_tower').mouseout(function() {
  $(this).fadeOut('slow');
});

.link {
  display: inline-block;
  height: 50px;
  margin: 10px 0;
  width: 50px;
}
.comm {
  background-color: #990DB4;
}
.store {
  background-color: #BE1E05;
}
.tower {
  background-color: #05BA2F;
}
.link_comm,
.link_store,
.link_tower {
  position: absolute;
  background: #efefef;
  z-index: 1000;
}

<div id="auxlinks">
  <div class="links">
    <a href="http://commuterservices.utah.edu/" target="_blank" class="link comm"></a>
    <a href="http://www.campusstore.utah.edu/utah/home.aspx" target="_blank" class="link store"></a>
    <a href="http://stadium.utah.edu/about/tower/" target="_blank" class="link tower"></a>
  </div>
  <!--links-->

  <!-- HIDDEN / POP-UP DIV -->

  <div class="link_comm">
    <h6>Commuter Services</h6> 
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="400" height="300" src="http://www.youtube.com/embed/rgpU02NEmy0" frameborder="0" allowfullscreen>
    </iframe>
    <p></p>
  </div>
  <!--link_comm-->
  <div class="link_store">
    <h6>Campus Store</h6>
    <p></p>
  </div>
  <!--link_store-->
  <div class="link_tower">
    <h6>Stadium and Arena</h6>
    <p></p>
  </div>
  <!--link_tower-->
</div>
<!--auxlinks-->

Answer 1

这是因为您对这些链接有一个mouseout 事件。如果您将其更改为 mouseleave，iframe div 应该会保留 -

$('.link_comm, .link_store, .link_tower').mouseleave(function() {
   $(this).fadeOut('slow');
 });