1

そのため、「サンプル テキスト」という要素のテキストを変更するために、アンジェリーナ ジョリーの画像に onmouseover を適用しました。「コントラバンのあなたの毎日の服用量」と書かれている元のテキストに戻すにはどうすればよいですか. よろしくお願いいたします。Jsfiddle はこちら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);
});
4

3 に答える 3

1

元のテキストをキャッシュし、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-16T20:40:54.980 に答える
1

あなたのフィドルはうまく機能します。そこにあるのは、新しい効果を台無しにしている古いホバーだけです。参照: 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-16T20:31:06.327 に答える
0

スクリプトを次のように変更します。

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

最初のホバー関数を削除し、2番目にorigTextのコンテンツを変更すると、すべてが希望どおりに機能します。

于 2013-01-16T20:36:03.070 に答える