-2

好的，所以我正在尝试使用无序列表构建导航，该列表在 li 悬停时显示 div。我在 wordpress 循环中工作，所以这是我的 HTML：

<div class="menu-header-container">
    <ul>
        <li>
            <?php
                $args = array(
                    'post_type' => 'menu',
                    'post_status' => 'publish',
                    'posts_per_page' => 10,
                    'offset' => 0,
                    'order' => 'ASC'
                );
                $the_query = new WP_Query( $args ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="#"><?php the_title(); ?></a>
        <div class="overlay">
            <p><?php the_field('sub_menu_item_one'); ?></p>
        </div>

这部分似乎工作正常。这是我的jQuery：

<script>
    $(".menu-header-container li").hover(function(){
        $(this).find(".overlay").stop().fadeIn();
    },function(){
        $(this).find(".overlay").stop().fadeOut();
    });   
</script>

这是我的 CSS

.menu-header-container {
    overflow: visible;
    float: right;
    width: 74%;
    margin-top: 4%;
}
.menu-header-container li {
    position: relative;
    display: block;
    height: 100%;
}
.menu-header-container ul li a {
    float: right;
    padding-left: 5%;
    font-size: 1.3125em;
    font-family:'MuseoSans300';
    text-transform: capitalize;
    display: block;
}
.overlay {
    display:none;
}
li > .overlay {
    position: absolute;
    top: 100%;
    left: 25%;
    overflow: visible;
}

这是我的输出：

<div class="menu-header-container">
    <ul>
        <li>
            <a href="#">Knowledge Center</a>
            <div class="overlay">
                <p>test</p>
            </div>
            <a href="#">Client Services</a>    
            <div class="overlay">
                <p>Technology For You</p>
            </div>
</div>

因此，当我将鼠标悬停在其中一个行项目上时，它会显示所有嵌套 div 中的所有内容，我认为这是我遇到的一个 jquery 问题，但它可能是 wordpress。

4

1 回答 1

2

您的 HTML 已更正：

<div class="menu-header-container">
    <ul>
        <li>
            <?php
                $args = array(
                    'post_type' => 'menu',
                    'post_status' => 'publish',
                    'posts_per_page' => 10,
                    'offset' => 0,
                    'order' => 'ASC'
                );
                $the_query = new WP_Query( $args ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="#"><?php the_title(); ?></a>
            <div class="overlay">
                <p><?php the_field('sub_menu_item_one'); ?></p>
            </div>
        </li>
    </ul>
</div>
于 2013-08-19T02:21:24.473 回答