Question

当您将鼠标悬停在某行上时，如何使用简单的工具提示显示图片和文字？有很多行，每行应该拥有独特的图像和文本。

我的表：

    <div id="tabel">
    <table id="tabel1" border="0" bordercolor="#000000" style="background-color:#FFFFFF" width="700" cellpadding="0" cellspacing="0">
        <tr id="toptr">
          <td>Navn</td>
          <td>Bedommelse</td>
          <td>Vaerdi</td>
          <td>Tid</td>
          <td>Udtraekkes</td>
          <td>Type</td>
       </tr>
       <% end %>
    <% @konkurrancer.each do |vind| %>
       <tr onclick="window.open('<%= vind.tracking %>')" onmouseout="this.style.background='white';" onmouseover="this.style.background='#99ff33';this.style.cursor='pointer'">
          <img src="#" style="display:none"><img><p style="display:none">HOVER TEKST</p>
          <td><%= vind.navn %></td>
          <td>4 ud af 5</td>
          <td><%= number_to_currency(vind.vaerdi, :unit => "DKK", :separator => ".", :delimiter => ".", :format => "%n %u", :precision => 0) %></td>
          <td>2 min</td>
          <td>Nyhedsbrev</td>
          <td><%= vind.udtraekkes.strftime("%d %B") %></td>
       </tr>
    <% end %>
    </table>

Answer 1

试试here。刚刚使用网站上的相同代码使用相同的示例进行了快速混搭。

Answer 2

这使用jQuery：

$('tr').hover(function()
{
  $(this).css('background-image', "url('foo.png')");
}, function() {
  $(this).css('background-image', 'none');
});

您必须添加更多代码才能使其不重复并对齐。

至于文本，你可以作弊并使它成为一个图像，但这有点hacky。我实际上会创建一个具有绝对定位的隐藏div，并在您悬停时显示它。

Answer 3

你可能在工具提示之后吗？使用jQuery，您可以使用here is a sample of some tooltips来显示文本和图像（您可以在div中创建它们，然后使用CSS来显示它们。）

如何在行上创建工具提示？使用Jquery或javascript

3 个答案: