html - 应用 onmouseover 更改文本

Question

我正在尝试将 onmouseover 应用于 Angeline Jolie(示例图片)，以更改上面的元素文本，上面写着“你每天服用的 Contrabang”(不要问)。实现这个的最佳方法是什么？预先感谢您的帮助。可以引用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;}

Answer 1

我会使用 jQuery，它可以简化事情。增加了一点开销，但如果您使用 CDN(例如 https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js)，它可能无论如何都在您用户的缓存中。

我删除了您在其中的两个函数并将其放入:

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

我还稍微更改了您的 HTML。我在链接中添加了“changeTextClass”类，并将要更改的目标元素作为“rel”属性:

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

现在您只需将“targetElm”作为 ID 添加到要更改为具有“changeTextClass”类的任何元素的元素:

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

希望对您有所帮助。