0

アンジェリン・ジョリー (サンプル画像) に onmouseover を適用して、上の「コントラバンの毎日の摂取量」という要素のテキストを変更しようとしています (聞かないでください)。これを実装する最良の方法は何ですか？よろしくお願いいたします。JSFIDDLE http://jsfiddle.net/cntra/VSCXy/または次のコードを参照できます。

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

<div class="morphing-tinting">
<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;">

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

1 に答える 1

2

物事を簡素化するjQueryを使用します。少しオーバーヘッドが追加されますが、CDN (例: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js ) を使用する場合は、おそらくユーザーのキャッシュにあります。

そこにあった2つの関数を削除し、代わりにこれを入れました：

$('.changeTextClass').hover(function(){
     $('#'+$(this).attr('rel')).text('Howdy.');
});

また、HTML を少し変更しました。クラス「changeTextClass」をリンクに追加し、変更するターゲット要素を「rel」属性として指定しました。

<a href="#" class="changeTextClass" rel="targetElm">

次に、「changeTextClass」クラスを持つ任意の要素に変更する要素に ID として「targetElm」を追加するだけです。

<span id="targetElm">Your Daily Dose of Contrabang</span>

ここでテストしてください: http://jsfiddle.net/VSCXy/1/

このようにして、この機能を他の要素に拡張できます。rel 属性にテキストを追加して、拡張可能にすることもできます。

その html は次のようになります。

<a href="#" class="changeTextClass" rel="targetElm|some sample text">

そして新しい機能：

$('.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-14T02:07:37.733 に答える