应用onmouseover更改文本

Question

我正在尝试将onmouseover应用于Angeline Jolie (示例图像)，以便更改上面显示为"Your Daily Dose of 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>

在这里进行测试：

通过这种方式，您可以将此函数扩展到其他元素。您还可以将文本添加到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);
});

希望这能有所帮助。