javascript - IE 7/8 的 jQuery 悬停闪烁错误

标签 javascript jquery css

根据帖子标题,我在使用 IE 7/8 时遇到一个小问题,当您将鼠标悬停在缩略图上时,它会闪烁。我的代码如下:-

function activateThumbnails(intThumbActiveOp, intThumbInActiveOp, intFadeTime,     strThumbClass)
{
    //Hide image title
    jQuery("a " + strThumbClass).attr('title', '');

    //Bind effect to post thumbnails..
    jQuery(window).bind("load", function() {
        var activeOpacity   = intThumbActiveOp,
            inactiveOpacity = intThumbInActiveOp,
            fadeTime = intFadeTime,
            clickedClass = "selected",
            thumbs = strThumbClass;

        jQuery(thumbs).fadeTo(1, inactiveOpacity);

        //Animate thumbnail on hover event..
        jQuery(thumbs).hover(
            function(){
                //Fade into thumbnail..
                jQuery(this).fadeTo(fadeTime, activeOpacity, function(){
                    //Display Preview Body once faded in
                    intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                    jQuery('#previewId' + intId.substr(6)).show();
                });
            },
            function(){
                // Only fade out if the user hasn't clicked the thumb
                if(!jQuery(this).hasClass(clickedClass)) 
                {
                    //Fade out of thumbnail..
                    jQuery(this).fadeTo(fadeTime, inactiveOpacity, function(){
                        //Hide Preview Body once faded out
                        intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                        jQuery('#previewId' + intId.substr(6)).hide();
                    });
                }
            });

        jQuery(thumbs).click(function() {
             // Remove selected class from any elements other than this
             var previous = jQuery(thumbs + '.' + clickedClass).eq();
             var clicked = jQuery(this);
             if(clicked !== previous) 
             {
                 previous.removeClass(clickedClass);
             }
             clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
         });
    });
 }

请注意,我在悬停图像上放置了一些预览文本,当光标位于预览文本(而不是图像本身)上时,您只会在 IE 7/8 中看到闪烁。如果没有文本覆盖,问题就不会发生,这说明了这一点。

任何帮助将不胜感激,因为我的截止日期很紧

亲切的问候和感谢,

p.s 这是我的标记:

 <div id="postId" class="postContainer">
 <!-- Post Preview canvas -->
<div id="previewId" class='postPreview'>
    <!-- Post preview Title -->
    <div class="previewTitle">
        some title
    </div>
    <!-- Post preview Body -->
    <div class="previewBody">
        some text body
    </div>
</div>
<a href="#"> 
    some thumbnail
</a>
</div>

最佳答案

通常,闪烁是由于您将鼠标悬停在鼠标悬停状态下从鼠标下方移出的字符上进行匹配引起的。 IE 的神奇技巧是字符之间的“背景”不算作字符——你实际上必须在一个字母上。考虑将悬停连接到包含此文本的 div,并确保在悬停状态下不会移动或被遮挡。

关于javascript - IE 7/8 的 jQuery 悬停闪烁错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10735904/

相关文章:

html - 基于对象宽度的 TranslateY

html - 尝试对与我的网页位于同一域中的 iFrame 进行 CSS 编辑?

javascript - 将 CouchDB 与 Node.js 库一起使用

javascript - 对于大数据,多选下拉搜索非常慢

javascript - 如何在没有 TestUtils.findAllInRenderedTree 的情况下遍历包括 DOM 组件在内的所有 React 组件?

javascript - 使用 Canvas 数据的 PDFMake 循环不能保持正确的顺序

jQuery .toggle() 显示和隐藏子菜单

jquery - 如何设置 jQuery Guillotine 插件?

javascript - 我如何向 UI 设计师证明 2 个 div 具有相同的高度和垂直位置?

html - 当我将鼠标悬停在元素上时显示 sibling