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

故障日志

---

--对于那些急切地等待另一次更新的人（2012年4月30日下午3:23），这里是：

我通过在主容器中添加一个最小高度来解决这个问题。这是一个糟糕的修正，我讨厌它-因为我必须调整每个内容。但这是我迄今为止收集到的唯一解决办法

最后的提示

---

未成功的更新。2012年4月24日，美国东部时间下午4:35/WildPeaks在下面的评论中发现了问题

我需要在滑块切换时保持定义高度。我试过多次尝试在定向SO参考问题中的所有建议，但似乎无法获得语法。我也尝试过不同的外汇的帮助

我还尝试了下面的CSS片段（没有太多意义，但值得一试）

实时URL[]（将鼠标悬停在几个底部页脚链接上）

表明是我的滑块引起的？我似乎在代码中找不到导致这种情况的任何东西？滑块代码：

<!-- 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 -->

在大多数情况下，跳转不是由浏览器跟随
“#”链接。页面会跳转，因为在动画的中点
在两个选项卡窗格之间，两个选项卡窗格都是完全透明的
隐藏（如在显示中：无），因此整体的有效高度
选项卡部分瞬间变为零

如果零高度选项卡部分导致页面变短，
然后，页面将显示为跳起进行补偿，而实际上是这样
它只是调整大小以适应（暂时）较短的内容。制造
理智

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

希望这有帮助
无论链接是否悬停在页脚，它似乎都会在滚动到页面底部的一秒钟后发生。我还没有找到导致它的原因，但这确实是一个令人沮丧/有趣的错误：）它为我自动跳转，而不悬停在链接上。它跳转是因为元素正在放大以包围位图吗？如果在css中指定元素的大小，使其足够大以包含位图，页面将不会跳转。问题在于页面顶部的滑块。缩小到可以在同一屏幕上看到滑块和页脚的程度，您会注意到幻灯片更改时的跳转。似乎表明这确实是一个容器的高度可能是原因。谢谢伊恩-你帮助我进一步描述了我的挣扎。但还是没有办法！对不起，我不能再帮你了；我尝试了我能想到的剧本的每一个变体！很高兴我能帮上一点忙。如果添加JavaScript将容器DIV的
min height
设置为容器DIV的当前高度，会怎么样？最困难的部分是正确的时间安排——您必须在加载所有内容时进行，但不能在幻灯片放映的两张幻灯片之间进行。
.footlink li:hover { 

margin: 0px;

}

<!-- 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 -->

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

</script>

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