悬停不工作在IE11和边缘
我想通过使用媒体查询使iframe扩展并缩小鼠标指针在iframe上时。悬停不工作在IE11和边缘
但是，它不起作用，但是，当鼠标指向框架边框时，它会展开并收缩。
剂量谁知道如何解决这个问题在IE11和边缘？
另外，由于相同的原始策略，我无法在iframe之外使用jQuery。所以，我可能需要修复css来实现这个动画。
<html>
<head>
<style type="text/css">
iframe[id^=sidebanner]{
width: 80px;
}
iframe#sidebanner{
right: 0;
}
iframe[id^=sidebanner]:hover{
width: auto;
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
@media all and (max-width: 2500px) {
iframe[id^=sidebanner]:hover{
width: 50%;
}
}
@media all and (max-width: 900px) {
iframe[id^=sidebanner]:hover{
width: 55%;
}
}
@media all and (max-width: 800px) {
iframe[id^=sidebanner]:hover{
width: 60%;
}
}
@media all and (max-width: 750px) {
iframe[id^=sidebanner]:hover{
width: 65%;
}
}
@media all and (max-width: 700px) {
iframe[id^=sidebanner]:hover{
width: 70%;
}
}
@media all and (max-width: 650px) {
iframe[id^=sidebanner]:hover{
width: 75%;
}
}
@media all and (max-width: 600px) {
iframe[id^=sidebanner]:hover{
width: 80%;
}
}
</style>
</head>
<body>
<iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>
</body>
</html>
我发现，你可以使用jQuery来添加一个类hover将包含延长iframe所需的CSS。
$('#sidebanner').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
有了这个功能，我们简单地告诉一类hover添加到我们的#sidebanner ID
您还需要CSS添加到hover类。这将是在iframe[id^=sidebanner]:hover中使用的相同的css。还要将hover类添加到您的@media查询中。
.hover {
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
非常感谢您的帮助。但是，我不能在iframe之外使用jQuery。所以，我可能需要修复css来实现这个动画。 –
从我研究，我无法找到'：悬停'工作的IE浏览器/边缘'iframe'没有jquery –
感谢您的帮助。我非常感谢你的帮助。我也无法找到任何解决方案。 –
我添加和删除悬停和鼠标离开事件 “hoveranimation” 级对应。
，并增加了 “＃sidebanner.hoveranimation” 的CSS
$('#sidebanner').hover(function() {
$(this).addClass('hoveranimation');
});
$('#sidebanner').mouseleave(function() {
$(this).removeClass('hoveranimation');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style type="text/css">
iframe[id^=sidebanner]{
width: 80px;
!important;
}
iframe#sidebanner{
right: 0;
}
iframe[id^=sidebanner]:hover{
}
@media all and (max-width: 2500px) {
iframe[id^=sidebanner]:hover{
width: 50%;
}
}
@media all and (max-width: 900px) {
iframe[id^=sidebanner]:hover{
width: 55%;
}
}
@media all and (max-width: 800px) {
iframe[id^=sidebanner]:hover{
width: 60%;
}
}
@media all and (max-width: 750px) {
iframe[id^=sidebanner]:hover{
width: 65%;
}
}
@media all and (max-width: 700px) {
iframe[id^=sidebanner]:hover{
width: 70%;
}
}
@media all and (max-width: 650px) {
iframe[id^=sidebanner]:hover{
width: 75%;
}
}
@media all and (max-width: 600px) {
iframe[id^=sidebanner]:hover{
width: 80%;
}
}
#sidebanner.hoveranimation {
width: auto;
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
</style>
</head>
<body>
<iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>
</body>
</html>感谢您的帮助，不幸的是，出于安全原因，我们只能使用CSS悬停iframe。所以....你认为你可以没有jQuery？ –
你按F12给开发者控制台检查你的JavaScript错误？ – mahlatse