javascript – 链接悬停故障 – 基本UL链接使页面跳转悬停？

失败日志

– 对于那些急切等待另一个更新(2012年4月30日,下午3:23)的人来说,这里是：

我设法通过在主容器中添加最小高度来解决问题.这是一个糟糕的解决方案,我讨厌它 – 因为我必须根据内容进行调整.但这是迄今为止我收集的唯一解决方案.

最后一分钟提示？ …

更新notcess. 2012年4月24日,美国东部时间下午4:35 // WildPeaks在下面的评论中发现了问题.

当我的滑块切换时,我需要保持定义高度.我曾尝试多次尝试定向SO参考问题中的所有建议,但似乎无法获得语法.我也试过不同的FX – 帮助！

<script type="text/javascript">

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

</script>

——原始问题如下：

我在无序列表中编写了一些基本的HTML / CSS链接.出于一个奇怪的原因,在悬停时,通过一些链接,页面会跳转并向上滚动.几乎就像用户点击了’#’一样.但这发生在悬停？

这是我的COMPLETE 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;

}

实时URL [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：

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

</script>

(也只是尝试在标记和CSS中加入UL / LI以防JS以某种方式进行交互.):(

解决方法:

In most cases, the jumping isn’t caused by the browser following the
‘#’ link. The page jumps because at the midpoint of the animation
between the two tab panes, both tab panes are fully transparent and
hidden (as in display: none), so the effective height of the whole
tabbed section becomes momentarily zero.

And if a zero-height tabbed section causes the page to be shorter,
then the page will appear to jump up to compensate, when in reality
it’s simply resizing to fit the (momentarily) shorter content. Makes
sense?

这是@wildpeaks之前发布的问题,我想我知道问题是什么.如果你一直缩小,你可以看到它是导致问题的幻灯片.我认为正在发生的事情是,当幻灯片改变时,它会变为0px,然后这会缩短页面.只需将“tab panes”替换为图像幻灯片.

他给出的代码根本不起作用,但我会在这里发布;我认为它可以定制工作：

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');
        }
});

希望这可以帮助

javascript – 链接悬停故障 – 基本UL链接使页面跳转悬停？

相关推荐