尝试使用 jquery 让 iframe 在 mouseenter 弹出窗口 div 中工作
trying to get an iframe to work in a mouseenter popup div using jquery
我创建了一个 fiddle 来说明我的问题所在。但基本上我有一个带有视频的弹出窗口 div。但是当您将鼠标悬停在 iframe 上时,我猜它认为这被认为是 mouseout 并且它关闭了 window。我怎样才能让它保持开放和互动? 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-->
这是因为您有一个针对这些链接的 mouseout
事件。如果将 iframe div
更改为 mouseleave
-
,则该 iframe div
应该保留
$('.link_comm, .link_store, .link_tower').mouseleave(function() {
$(this).fadeOut('slow');
});
我创建了一个 fiddle 来说明我的问题所在。但基本上我有一个带有视频的弹出窗口 div。但是当您将鼠标悬停在 iframe 上时,我猜它认为这被认为是 mouseout 并且它关闭了 window。我怎样才能让它保持开放和互动? 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-->
这是因为您有一个针对这些链接的 mouseout
事件。如果将 iframe div
更改为 mouseleave
-
iframe div
应该保留
$('.link_comm, .link_store, .link_tower').mouseleave(function() {
$(this).fadeOut('slow');
});