Question

我正在构建一个布局，其中我在<nav><ul><li><a>元素中有几个“触发器” - 每个元素都显示<div>，它有效地位于“后面”（z-index）。

即使用户从相应的触发器（.thetrigger，.thenextrigger）移动鼠标，我也需要div（#showme和#showmetoo）保持可见 - 因为div将包含内容/链接。

此外，当用户从一个触发器移动到下一个触发器时，显示的div应该改变。

<header>
        <nav>
            <ul>
                <li><a class="thetrigger">Show Me That Thing</a></li>
                <li><a class="thenexttrigger">Show Me That Thing</a></li>
            </ul>

        </nav>

        <div id="showme">Yay, this thing</div>
        <div id="showmetoo">and this thing</div>

    </header>

CSS

header {
            width: 100%;
            height: 300px;
            position: relative;
            background: red;
            z-index: 1;
        }
        nav {
            position: absolute;
            top: 10px;
            left: 30px;
            z-index: 3;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            float: left;
            padding: 30px;
        }
        .thetrigger, .thenexttrigger {
            color: white;
        }
        #showme {
            display: none;
            background: blue;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            height: 300px;
            width: 100%;
            z-index: 2;
        }
        #showmetoo {
            display: none;
            background: green;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            height: 300px;
            width: 100%;
            z-index: 2;
        }

的jQuery

$(document).ready(function() {
            $('.thetrigger').hover(function() { 
                $('#showme').fadeIn(); 
            }, function() { 
                $('#showme').fadeOut(); 
            });
            $('.thenexttrigger').hover(function() { 
                $('#showmetoo').fadeIn(); 
            }, function() { 
                $('#showmetoo').fadeOut(); 
            });
        });

http://jsfiddle.net/richardblyth/24bcs/

Answer 1

Demo

听起来你希望div保持不变，直到下一个触发器悬停在上面。

如果你使用触发器的类，你可以使用更少的jQuery，并使用数据找到它们各自的div。有了这个，您可以添加任意数量的触发器+相应的div，而无需编写更多jQuery。

HTML

<header>
    <nav>
        <ul>
            <li><a class="trigger" data-show="pane1">Show Me That Thing</a></li>
            <li><a class="trigger" data-show="pane2">Show Me That Thing</a></li>
        </ul>        
    </nav>

    <div class="pane" data-show="pane1" id="showme">Yay, this thing</div>
    <div class="pane" data-show="pane2" id="showmetoo">and this thing</div>

</header>

的jQuery

$(function(){

    $('.trigger').on('mouseover', function(){
        // show the desired pane and hide its siblings
        $('.pane[data-show="' + $(this).data('show') + '"]').fadeIn().siblings('.pane').fadeOut();   
    });

});

Answer 2

我认为，如果我理解你的问题，你实际想要的是当你将鼠标悬停在与#showmetoo元素相关联的触发元素时隐藏另一个#showme元素。

像这样：

 $(document).ready(function() {
$('.thetrigger').hover(function() { 
    $('#showme').fadeIn(); 
    $('#showmetoo').fadeOut(); 
});
$('.thenexttrigger').hover(function() { 
    $('#showmetoo').fadeIn(); 
    $('#showme').fadeOut(); 
});

}）;

http://jsfiddle.net/4N26S/

鼠标从触发器移动后保持Div可见（jQuery）

2 个答案: