0

我正在尝试将 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;}
4

1 回答 1

2

我会使用 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);
});

希望有帮助。

于 2013-01-14T02:07:37.733 回答