在鼠标离开触发器后保持Div可见(jQuery)

我目前正在构建一个布局，其中我在<nav><ul><li><a>元素中有几个'触发器' -每个显示一个<div>，有效地位于'后面' (z-index)。

我需要div (#showme和#showmetoo)保持可见，即使用户将鼠标从各自的触发器(。触发器，.thenextrigger) -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/

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

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

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