CODEWITHSUNDEEP
jqueryhtmlcssonmouseover
Kadeem L
Kadeem L

Reputation: 863

Onmouseover reverts to original text

So I've applied onmouseover to the Angelina Jolie image in order to change the text of the element above which reads "some sample text". How can I make it revert back to the original text, which reads, "Your Daily dose of Contrabang". Thank you in advance for your help. The Jsfiddle is here http://jsfiddle.net/cntra/VSCXy/9/

HTML:

<div class="columa">     
<div id="text-display">
<span id="targetElm">Your Daily Dose of Contrabang</span>
</div>

<div class="morphing-tinting">
<a href="#" class="changeTextClass" rel="targetElm|some sample text">
<span class="image-wrap" style="position:relative; left: 0px; top:0; display:inline-block;        
background:url
(http://www.howmuchdotheyweigh.com/wp-content/uploads/2011/02/angelina-jolie.jpg)
 no-repeat center center; width: 250px; height: 250px;">
</span></a>

CSS:

  #text-display
 {top:; position: relative;
 display:inline-block;padding:5px 10px; 
 font-family: sans-serif; font-weight:bold; font-size:50px; 
 color: white; text-align: center; line-height: 1.2em;margin:0px;   
 background-color:#E94F78;}


.morphing-tinting .image-wrap {
position: absolute;

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}

.morphing-tinting .image-wrap:hover{
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}

JS

$('.changeTextClass').hover(function(){
    var elmData = $(this).attr('rel').split('|');
    $('#'+elmData[0]).text(elmData[1]);
});

    var elmData,origText;
$('.changeTextClass').hover(function(){
    elmData = $(this).attr('rel').split('|');
    origText = $('#'+elmData[0]).text();
    $('#'+elmData[0]).text(elmData[1]);
 }, function(){
    $('#'+elmData[0]).text(origText);
});

Upvotes: 1

Views: 881

Answers (3)

Onur Yıldırım
Onur Yıldırım

Reputation: 33664

You can cache your original text and use the handlerOut callback to set the text back to original.

.hover( handlerIn(eventObject), handlerOut(eventObject) )

So, in the DOM ready, I would do this:

$(document).ready(function()
{
  var originalText = $('#targetElm').text();

  $('.changeTextClass').hover(
    function() {
      var elmData = $(this).attr('rel').split('|');
      $('#targetElm').text(elmData[1]);
    },
    function() {
      $('#targetElm').text(originalText);
    }
  );
});

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

Change your script to the following:

var elmData,origText;
$('.changeTextClass').hover(function(){
    elmData = $(this).attr('rel').split('|');
    origText = $('#targetElm').text();
    $('#'+elmData[0]).text(elmData[1]);
 }, function(){
    $('#'+elmData[0]).text(origText);
});

You delete the first hover function and in the second you change the content of origText and all works like wanted.

Upvotes: 0

Travis J
Travis J

Reputation: 82297

Your fiddle works just fine, all you have in there is the old hover which is ruining the new affect. See: http://jsfiddle.net/VSCXy/10/ (note I removed Angelina because she was NSFW)

updates js section:

var elmData,origText;
$('.changeTextClass').hover(function(){
    elmData = $(this).attr('rel').split('|');
    origText = $('#'+elmData[0]).text();
    $('#'+elmData[0]).text(elmData[1]);
 }, function(){
    $('#'+elmData[0]).text(origText);
});

Upvotes: 1

Related Questions