I can't make a mouseover/mouseout JQuery div transition on Tumblr

Question

This is my first time using any form of JavaScript and after hours of painstakingly toying with this code, I'm at a loss. I can't be the only one.

I'm trying to create a transition effect that starts with a div containing the text "HOVER". When moused over, it expands another text-related div while hiding the "HOVER" div. When the mouse is removed, the "HOVER" div will return.

While I do think I've figured out the code and it works on JSFiddle (only as JQuery OnLoad), it won't work on Tumblr. I'm able to get the hover expanding animation, but the second text div will not replace the "HOVER" div. The "HOVER" div is always visible.

I've tried changing the src links for Tumblr to recognize and load JQuery, I've tried placing a trigger extension on the body tag (may have done this incorrectly though), and I've tried to paste the codes in the header, after the starting body tag and before the closing body tag.

The script in my header:

<script type=”text/javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type=”text/javascript” src=”http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js” charset=”utf-8”></script>

<script>
    $('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});
</script>

The CSS:

#description2 {
    z-index: 999;
    position:fixed;
    text-align:justify;
    left:0px;
    top:436px;
    margin-left:70px;
    width: 150px;
    height:15px;
    padding:1px;
    border:1px solid #ccc;
    font-family:'brie';
    font-size:10px;
    background-color: #fff;
    overflow-y:none;
    overflow-x:none;
    opacity:0.9;
    filter:alpha(opacity=90);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#description2:hover {
    z-index: 999;
    position:fixed;
    left:0px;
    top:355px;
    margin-left:20px;
    width: 232px;
    height:150px;
    padding:15px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext1 {
    padding:0px;
    text-align: center;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext2 {
    padding:15px;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    display: none;
}

The HTML:

<div id="description2">
<div id="descriptiontext1">HOVER</div>
<div id="descriptiontext2">TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN</div></div>

Answer 1

change

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});

To

$.noConflict();
    $(function () {
        $('#descriptiontext1').on('mouseover', function () {
            $('#descriptiontext2').show();
            $('#descriptiontext1').hide();
        });

        $('#descriptiontext2').on('mouseout', function () {
            $('#descriptiontext1').show();
            $('#descriptiontext2').hide();
        });
    });

DEMO HERE

use $.noConflict(); method because you are using two versions of jquery library. you can see the full documentation here

Answer 2

Wrap your event bindings inside a DOM ready event. This is pretty common in jQuery and essential to counter loading issues.

// once the DOM is ready
$(function(){
    $('#descriptiontext1').on('mouseover', function () {
        $('#descriptiontext2').show();
        $(this).hide();
    });

    $('#descriptiontext2').on('mouseout', function () {
        $('#descriptiontext1').show();
        $(this).hide();
    });
});

Also note jQuery supports a toggle function which handles/toggles show() and hide() automatically. Haven't tested it but something along the lines of this might work for you if descriptiontext2 is hidden by default:

$(function(){
    var descriptions = $('#descriptiontext1, #descriptiontext2');

    descriptions.on('mouseover, mouseout', function () {
        descriptions.toggle();
    });
});

DEMO

Answer 3

Quick way, if you want to make it advance, you can use on event listener for both mouseout, mouse in and functions for better readability and optimization. Also you don't have to use js to hide and show, you can use css3 as well.

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

$('#descriptiontext2').on('mouseout', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});