Question

我最近制作了一个网络摄像头应用程序。请在此处查看：http://kennipoke.dk/nickelodeon/da/docs/webcam.php

顶部是4个头盔，点击后会将？helmet = X添加到URI ..

现在在实际的网络摄像头屏幕上方，我希望所选的头盔显示一些透明度，这样你就可以通过它看到自己的脸。

只有悬停拍摄按钮时才会显示图像。

现在我把所有这些工作都除了IE浏览器!!!!!!

以下是相关代码：

<div id="camera">
    <div id="screen-frame<?php echo $helmet ?>"></div>
    <div id="screen"></div>
    <div id="buttons">
         <div class="buttonPane">
           <a id="shootButton" href="" class="blueButton btn btn-info">Hold musen over denne knap og tag et billede</a>
         </div>
         <div class="buttonPane hidden">
               <a id="cancelButton" href="" class="blueButton btn btn-danger">Tag et nyt</a> <a id="uploadButton" href="" class="greenButton btn btn-info">Videre</a>
         </div>
    </div>
    <span class="settings"></span>
</div>

当然$ helmet是URI的值

$('#shootButton').mouseover(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
});
$('#shootButton').mouseout(function() {
    $('#screen-frame1').removeClass('show').addClass('hide');

我对jQuery没有经验，所以我制作了这个脚本的四个副本。每个＃screen-frameX一个

继续CSS：

#camera{
    background:url('../img/cam_bg.jpg') repeat-y;
    border:1px solid #f0f0f0;
    height:370px;
    width:520px;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0;
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6);
    box-shadow:0 0 4px rgba(0,0,0,0.6);
    margin: 130px 30px 0;
    position: relative;
    z-index: 5;
}

#screen{
    width:520px;
    height:370px;
    background:#ccc;
    line-height: 360px;
    text-align: center;
    color:#666;
}

#screen-frame1 {
    background: url("../img/overlay/transparent/helmet-t-1.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame2 {
    background: url("../img/overlay/transparent/helmet-t-2.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame3 {
    background: url("../img/overlay/transparent/helmet-t-3.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame4 {
    background: url("../img/overlay/transparent/helmet-t-4.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}


.hide {
    height:0;
}

.show {
    height:370px;
}

任何人都可以发现任何导致IE出现故障的问题吗？

Answer 1

您是否尝试过正常的悬停功能？

$('#shootButton').hover(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
}, function() {
    $('#screen-frame1').removeClass('show').addClass('hide');
});

编辑：

为show和hide类尝试以下CSS：

.show {
   display: block;
   height: 370px;
}
.hide {
   display: none;
   height: 0px;
}

您甚至可能不需要更改height属性，这也应该在IE中实现。

Answer 2

根据我的理解，您的内容是动态加载的？尝试使用.live而不是单个悬停。

$('#shootButton').live('hover', function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
}, function() {
    $('#screen-frame1').removeClass('show').addClass('hide');
});

Answer 3

尝试：

$('#shootButton').mouseenter(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
});
$('#shootButton').mouseleave(function() {
    $('#screen-frame1').removeClass('show').addClass('hide');

jQuery悬停在IE中的问题

3 个答案: