logo标签列表

链接悬停故障 - 基本的UL链接在悬停时使页面跳动？

javascriptcssxmlwordpressdebugging
4

失败日志

--对于那些迫切期待另一个更新(2012年4月30日下午3:23)的人，这就是更新：

我已经通过为我的主容器添加最小高度来解决问题。这是一个不好的修复方式，我很讨厌它——因为我必须针对每个内容进行调整。但这是我目前收集到的唯一解决方案。

最后一分钟提示？...

未成功的更新。2012年4月24日，下午4:35 EST // WildPeaks在下面的评论中确定了问题。

当我的滑块切换时，我需要保持定义的高度。我已经尝试了所指定的SO参考问题中的所有建议，并且尝试了不同的FX，但似乎无法得到语法。我还尝试了不同的FX-帮帮我！！

<script type="text/javascript">

jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

------ 以下是原始问题：

我在无序列表中编写了一些基本的HTML / CSS链接。由于某种奇怪的原因，在某些链接上悬停时，页面会跳动并向上滚动。几乎就像用户已单击“＃”一样。但这发生在悬停时？

这是我的完整footer.php（这是在WordPress网站内）

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

        <div id="endPage">
            <div id="contactus">

                <br /><br />
                <p>Suggestions? Requests? Feedback? Are you talking about our books?<br />
                Send us links to your book reviews and contact us on <a href="http://twitter.com/readitforward">Twitter</a> or <a href="http://www.facebook.com/ReadItForward">Facebook</a> or email us at <a href="mailto:readitforward@randomhouse.com">readitforward@randomhouse.com</a>.
                </p>                
                </div>

<?php //<!-- =-=-=-=-=-=-=-=-=-=BEGIN RH FOOTER-==-=-=-=-=-=-=-=-= --> ?>




    <div id="footer" style="margin-top: 30px;">

    <div style="float:left;"><img src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/04/RIF-Footerlogo.jpg" style="border:0px;" /></div><br />

    <div style="position: absolute; margin-right: -150px; width: 350px; height: 250px; margin-top: 50px; padding-bottom: 15px;">
    <ul id="feetnav" style="list-style: none; padding-left: 5px;">

    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=9">Free Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Reader Reviews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Meet the author</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Meet Editor</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Book Groups</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Favorites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">All Categories</a></li>

    </ul>
    </div>

    <div id="searchfoot" style="margin-left: 550px; margin-top: 75px;">

    <?php get_search_form(); ?>


    </div>

    <br />

    <hr style="color: #fff; border: 1px solid white; height: 1px;" /></hr><br />


    <div id="footer_categories">


    <div style="">

    <ul id="feetnav2" style="list-style: none; padding-left: 5px;">

    <li style="float:left; font-color: #000;"><a href="http://www.osmproduction.com/RIF/?cat=9">The Crown Publishing Group</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Authors</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Communites</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Features</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Readers Guide</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Feature Sites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">News</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Read It Forward</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">CrafterNews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">The Recipe Club</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books for Better Living</a></li>
    </ul>

    <p class="copyright">Use of this site indicates your consent to the Terms of Use. Copyright &copy; 1995-2012 Random House, Inc. All rights reserved.</p>            
    </div>        
    </div>

</div>
</div>
</div>

<?php
function homepagename() {
    $homepagename = "";
    if(strlen($_SERVER['REQUEST_URI']) < 2) {
        $homepagename = "Read It Forward Homepage";
    }
    print $homepagename;
}
?>

我也尝试了下面的CSS代码片段（虽然看起来有点奇怪，但还是值得一试的）
.footlink li:hover { 

margin: 0px;

}

实时网址 [ http://tinyurl.com/cz6sawg ] (将鼠标悬停在底部几个链接上)

建议我的滑块可能会导致这种情况？但我似乎找不到任何应该引起此问题的代码？滑块代码：

<!-- Top of Page Slider -->


<div id="photo-rotator">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>


    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title"><?php the_title(); ?></span>
     </a>
     </div>

    <?php endwhile; ?><!--/close loop-->

    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <? the_title(); $nav_id++;?>

                    <div style="">

                    <!--<?php the_excerpt(); ?>-->

                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">

                         <p style="font-weight: normal; font-size: 14px;"><?php echo $text; ?></p> 

                         </div>
                        <?php } //else { print"<div>"; } ?>  

                    </div>   

                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>

<!-- End Top page Slider -->

以下是JS启动幻灯片的代码：

以下是JS启动幻灯片的代码：

<script type="text/javascript">
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>
< p > （还尝试了删除标记中的UL / LI以及相关的CSS，以防JS产生某种影响。） :( （也尝试过从标记中剥离UL / LI并使用CSS，以防止JS干扰。）:(
3
似乎在滚动到页面底部一秒钟后，无论是否悬停在页脚链接上，都会发生这种情况。我还没有找到是什么原因导致的，但这确实是一个令人沮丧/有趣的错误 :) - wildpeaks
1
它自动为我跳转，无需悬停在链接上。 - Luke Duddridge
1
你的问题出在页面顶部的滑块上。缩小到足以看到滑块和页脚在同一屏幕上，你会注意到滑块变化时的跳跃。 - Ayman Safadi
刚刚添加了我的滑块代码，如果有人看得懂，请帮帮忙！ - Coastal-Cam
2
这个类似的问题与jQuery UI Tabs和toggle fx有关，似乎表明容器的高度可能是原因。 - wildpeaks
显示剩余8条评论
1个回答
1
在大多数情况下，页面跳动不是由于浏览器遵循“＃”链接引起的。页面跳动是因为在两个选项卡窗格之间的动画中点，两个选项卡窗格都完全透明和隐藏（例如display：none），因此整个选项卡部分的有效高度短暂变为零。
如果零高度的选项卡部分导致页面变短，则页面将显示向上跳以进行补偿，但实际上它只是调整大小以适应（短暂）较短的内容。有意义吗？
这是@wildpeaks早些时候发布的问题，并且我认为我知道问题出在哪里。如果您将缩放调至最低，就会发现是幻灯片放映引起了问题。我认为正在发生的是当幻灯片放映更改时，它变为0px，然后使页面变短。只需将“选项卡窗格”替换为图像幻灯片放映即可。
他提供的代码根本不起作用，但我将在此处发布它；我认为可以自定义以使其起作用。
jQuery('#photo-rotator').tabs({
        fx: { opacity: 'toggle' },
        select: function(event, ui) {
                jQuery(this).css('height', jQuery(this).height());
                jQuery(this).css('overflow', 'hidden');
        },
        show: function(event, ui) {
                jQuery(this).css('height', 'auto');
                jQuery(this).css('overflow', 'visible');
        }
});

希望这能有所帮助。
谢谢Ian - 你帮我更好地描述了我的困境。但是我仍然没有解决方案！ - Coastal-Cam
抱歉，我无法再为您提供更多帮助了；我尝试了我能想到的该脚本的每个变体！ - Ian
很高兴我至少能帮上一点忙。 - Ian
如果您添加了设置容器DIV的“min-height”为当前容器div高度的JavaScript，会怎样呢？难点在于正确计时 - 必须在所有内容加载完成时执行，但不要在幻灯片演示的幻灯片之间执行。 - Ian
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接