Question

我试图将onmouseover申请到Angeline Jolie（示例图片），以便更改上面元素的文字，其中包括＆＃34;你的每日剂量的违禁品＃34;（不要＆＃39;请问）。实现这个的最佳方法是什么？预先感谢您的帮助。您可以参考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。我添加了类＆＃34; changeTextClass＆＃34;链接，并将目标元素更改为＆＃34; rel＆＃34;属性：

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

现在你只需添加＆＃34; targetElm＆＃34;作为要转换为任何元素的元素的ID，使用＆＃34; changeTextClass＆＃34;类：

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

希望有所帮助。

应用onmouseover更改文本

1 个答案: