How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]


Tags: jquery,css,html

Problem :

I have a list of links, followed by a DIV, like this:

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

And here is my 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>

The on hover swaps work, but I don't know how to display default content for when hover is not engaged.

I need to have the contents of the first .mast-text DIV to be the default if nothing is hovered over.

How do I do this?



Solution :

You could do something like this:

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

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

Heres a jsfiddle: http://jsfiddle.net/ycyfn/


    CSS Howto..

    How to add text with css without pseudo-element

    How to change the background-color of jumbrotron?

    How can I change a table td width using CSS in Spiceworks?

    How to display sub menu horizontally?

    How to move nagivation bar to more to the right to fit a logo left of the bar

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How do I set frame alignment?

    How to keep website footer at bottom even when page expands downwards

    How do you make this dogeared shape with css only

    jquery style sheet switcher - how to effect only theme css?

    How to write multiple css selectors in one line?

    How to make a hidden border side inherit border properties in CSS

    Ionic: How to center a div?

    How to adjust the height of a series of DIVs by CSS

    How do I make this lightbox I am creating only open on the div I am clicking?

    How to make a toggleable navbar in pure CSS?

    How to make a multi category filter with JQuery, HTML and CSS

    How to center text horizontally & vertically within dotted border

    how to make an odd shaped html/css menu?

    How can I center the table in the page?

    How can I specify distance between list items?

    How to add the very last border on the sub menu items

    How do I remove flickering from my HTML page?

    How to slowly move header while user scrolls the page?

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    How to change both fill and stroke in svg with css

    How do I keep a span from being at the end of a line?

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    How To Get Color of WebElement From Complicated css case using Webdriver?