Question

我想建立一个缩略图悬停效果。它适用于每个浏览器，但IE ...我哪里出错？！？

JQuery的：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="thumbhover.js"></script>
<script>

$('.sliders li:gt(3)').css('display', 'none');

$(".more").click(function() {
    $('.sliders li:first').insertAfter('.sliders li:last').toggle('clip', 100, function() {
        $('.sliders li:eq(3)').toggle('scale', 100);
    });

});

$(document).ready(function() {
    $('#thumb img').hoverpulse({
        size: 50,  // number of pixels to pulse element (in each direction)
        speed: 400 // speed of the animation 
    });
});
</script>

HTML：

<div class="clients">
    <ul class="sliders" style="font-size: 11px; list-style: none;">
      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/12.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          15 min. fight 15 lbs Jack Crevalle</strong><br />
          February 22 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/11.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 190px; margin-left: 87px;">
          <strong>Ben Kirkpatrick with a Baby Tarpon</strong><br />
          February 21 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/10.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div style="height: 60px; width: 200px; margin-left: 87px;">
          <strong>Ben with a nice size lookdown</strong><br />
          February 21 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/9.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong>Cancun</strong><br />
          February 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/8.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Chris Webber</strong><br />
          February 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/7.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Dwayne Perillo, first bonefish of 2012</strong><br />
          February 18 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/6.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Sweet catch</strong><br />
        </div>
      </li>
    </ul>
  </div>

CSS：

.slider{
    position: relative;
    height: 65px;
    margin-bottom: 4px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}   

.clients{
    width: 330px;
    margin: 0 auto;
    position: relative;
    height: 320px;
}

这是实际的website，请不要评论代码是多么混乱。我不应该碰它！（在客户端所在的下半部分）。

Answer 1

刚刚看了IE9，它被迫在Quirks mode中呈现。在尝试找出IE无法正常工作的原因之前，如果可能的话，花时间修复渲染引擎（让它在标准模式下运行）。很有可能它会自行解决。

拇指悬停效果无法在IE中运行

1 个答案: