javascript - Rails中是否有一种方法可以仅针对文本实现image_tag类型的鼠标悬停？ JavaScript和CSS解决方案不起作用

基本问题：我有一行文字，在悬停时，我希望该文字更改为其他内容。基本吧？让我烦恼的是，有问题的文本存储在控制器中的哈希中，而我正在遍历它。

这是我的PagesController中的哈希的较小版本：

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

因此，在我看来（将@team定义为我的PagesController中的哈希值），我循环遍历为每个人创建一个About About条目。

    <% @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 %>

我正在尝试查看是否有一种简单的解决方案，就像我的image_tag：mouseover一样，以便在悬停时将标题更改为secret_titles。我首先尝试了CSS，与此类似。但是我不能只是将该成员变量放入CSS中，因为它不在该循环之外。我想JavaScript也是一样。

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

无论如何，我希望找到的是像我尚未遇到的text_tag之类的东西，它具有与image_tag类似的：mouseover属性。

最佳答案

您可以使用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 %>

交换值（jQuery定义一次）：

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

API文档中定义的JQuery hover事件将2个处理程序绑定到匹配的元素，因此，当鼠标悬停在上面和上面的代码中时，您可以执行交换逻辑。

JSFIDDLE：http://jsfiddle.net/VmqB7/4/