Question

我有一个HTML表<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:layout_height="match_parent" android:layout_width="match_parent"> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar /> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:paddingBottom="150dp" /> <LinearLayout android:layout_height="150dp" android:layout_gravity="bottom"> <EditText /> <ImageButton /> </LinearLayout> </android.support.design.widget.CoordinatorLayout>，它看起来像这样：

tr

使用此代码我需要的是，<tbody> <tr> <td><input type="checkbox" /></td> <td> <a href="" class="name">This is Pet Name</a> <div class="manage-link"> <a href="">Edit</a> | <a href="">Delete</a> | <a href="">View</a> </div> </td> <td>Administrator</td> <td><a href="">German Shepherd</a>, <a href="">Dogs</a></td> <td class="center">View</td> <td><span>2015/06/16</span>Added</td> </tr> .... .... </tbody> DIV应仅在鼠标悬停在此manage-link时显示。

这是我试过的方式。但我无法让它发挥作用。

tr

有谁可以告诉我这有什么问题？

谢谢。

Answer 1

变化：

tbody tr:hover + td div.manage-link {
    display: block;
}

要：

tbody tr:hover td div.manage-link {
    display: block;
}

Answer 2

我能想到的是使用带有mouseenter和mouseleave事件的JQuery，这样就不会强制你改变tr显示属性。

window.onload = function(){
  $('tr').mouseenter(function(){
    $('div.manage-link').css('display','block');
  });
  $('tr').mouseleave(function(){
    $('div.manage-link').css('display','none');
  });
}

使用CSS将鼠标悬停在表格行中时显示一些HTML

2 个答案: