Onmouseover恢復爲原始文本

因此，我已將onmouseover應用於Angelina Jolie圖像，以便更改上面顯示「某些示例文本」元素的文本。我怎樣才能讓它恢復原來的文字，內容是「你的每日劑量的Contrabang」。預先感謝您的幫助。該的jsfiddle在這裏http://jsfiddle.net/cntra/VSCXy/9/Onmouseover恢復爲原始文本

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

$('.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); 
});

來源

2013-01-16 Kadeem Laurie

您可以緩存原始文本並使用handlerOut回調將文本設置回原始。

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

所以，在DOM準備好了，我這樣做：

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

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

來源

2013-01-16 20:40:54

你撥弄工作得很好，你有沒有舊的懸停這正在破壞新的影響。請參閱：http://jsfiddle.net/VSCXy/10/（注意我刪除了安吉麗娜，因爲她是NSFW）

更新JS部分：

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); 
});

來源

2013-01-16 20:31:06

大聲笑，我明白了，多謝了這小子。 –

更改腳本如下：

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

刪除第一個懸停功能和第二個改變origText的內容以及所有想要的作品。

來源

2013-01-16 20:36:03

Onmouseover恢復爲原始文本

回答

相關問題