在Rails中有没有一种方法可以实现一个只用于文本的图像\标记类型鼠标覆盖器？JavaScript&；CSS解决方案不起作用

基本问题：我有一行文本，悬停时，我希望该文本更改为其他内容。基本的，对吗？让我大吃一惊的是，所讨论的文本存储在我的控制器中的一个散列中，我正在循环它

以下是我的页面控制器中的哈希值的较小版本：

def team_list
    return [ {
        name: "Employee 1",
        title: "Founder and CEO",
        secret_title: "Something Funny",
        image: "about-employee-color.jpg",
        alt_image: "about-employee-alt.jpg"
      },
      {
        name: "Employee 2",
        title: "Not Founder and CEO",
        secret_title: "Something Else Funny",
        image: "about-employee2-color.jpg",
        alt_image: "about-employee2-alt.jpg"
      } ]
end

因此，在我的视图中（在我的PagesController中将@team定义为该散列），我将循环为每个人创建一个关于页面的条目

    <% @team.each do |member| %>
    <div class="about-team">
      <%= image_tag member[:image], :mouseover => member[:baby_pic] %>
      <%= image_tag member[:baby_pic], :style => "display:none;" %>
      <h2><%= member[:name] %></h2>
      <h4><%= member[:title] %></h4>
      <h4 style="display:none;"><%= member[:secret_title] %></h4>
    </div>
    <% end %>

成员[：宝贝图片]]>
“显示：无；”%>

我想看看是否有一个简单的解决方案，就像我的图像标签：鼠标悬停，让我的标题变成悬停的秘密标题。我首先尝试了CSS，与此类似。但是我不能把这个成员变量放到CSS中，因为它不存在于这个循环之外。我想JavaScript也是这样

    h4:hover { content:<%= member[:secret_title] %>; } 

h4:hover{content:；}

---

不管怎样，我希望的是一个像文本标记这样的东西，我还没有遇到过，它有一个类似的：mouseover属性作为image\u标记

您可以使用JQuery功能交换直接作为DOM元素中的属性存储的值，在本例中，这些值将是

div

和类

about team

，而无需真正更改rails控制器

存储值：

<% @team.each do |member| %>
<div class="about-team" member-title="<%= member[:title] %>" secret-title="<%= member[:secret_title] %>">
  <%= image_tag member[:image], :mouseover => member[:baby_pic] %>
  <%= image_tag member[:baby_pic], :style => "display:none;" %>
  <h2><%= member[:name] %></h2>
  <h4><%= member[:title] %></h4>
</div>
<% end %>

API文档中定义的JQuery

hover

event将两个处理程序绑定到匹配的元素，因此当鼠标悬停时，您可以像上面代码中所做的那样执行交换逻辑

---

JSFIDDLE：

我仍然有一个问题，最初导致我放弃这个解决方案，那就是当它们都显示在一个页面上时，它一次交换掉所有h4元素。下面是正在发生的事情：@LizHubertz我修正了答案，选择器必须设置为元素悬停，

this

。另一方面，每个

h2

和

h4

必须在新部门的

class=about team

中，因此每个成员都有相应的

标题和
秘密标题
    $('.about-team h4').hover(
      function(){     //mouse enter
          $(this).html($(this).parent().attr('secret-title'));
      },    
      function(){     //mouse leave
          $(this).html($(this).parent().attr('member-title'));        
      }    
    );