Question

我有一个链接列表，后跟DIV，如下所示：

<div class="masthead screen">

<ul class="mast screen">
<li><a href="#">Relacionarse<br />con Efectividad</a></li>
<li><a href="#">Productividad<br />Personal</a></li>
<li><a href="#">Confianza</a></li>
<li><a href="#">Vivir la Vida<br />Plenamente</a></li>
<li><a href="#">Rompimientos</a></li>
<li><a href="#">Hacer una<br />Diferencia</a></li>                  
</ul>

<div class="mast-text screen"><p>DEFAULT TEXT una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK ONE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK TWO en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK THREE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK FOUR en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK FIVE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK SIX en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

</div>

这是我的jQuery：

<script>
$(function(){
    var $container = $(".masthead"),
        $testimonials = $(".mast-text", $container).hide();

    $(".mast li", $container).hover(function() {
        $testimonials.eq( $(this).addClass("active").index() ).show();
    }, function() {
        $testimonials.eq( $(this).removeClass("active").index() ).hide();
    });
});
</script>

悬停交换有效，但我不知道如何在未使用悬停时显示默认内容。

如果没有任何东西悬停，我需要将第一个.mast-text DIV的内容作为默认值。

我该怎么做？

Answer 1

$('ul li').hover(function(){
   var ind=$(this).index();
   $('#swap').html($('.swaps').eq(ind).html());
},function(){
   $('#swap').html('DEFAULT CONTENT FOR WHEN NOTHING TRIGGERED');
 });

给掉swap divs class =“swaps”

Answer 2

你可以这样做：

$(function(){
    // store default content
    var def = $('#swap').html();

    $('a').hover(function(){
        $('#swap').html($($(this).attr('href')).html());
    }, function(){
        $('#swap').html(def);
    });
});

继承人：http://jsfiddle.net/ycyfn/

如何使用jQuery / CSS在列表项上交换DIV onmouseover的内容？

2 个答案: