Question

我有一张表格如下：

<tr class="record"><div class="mi_dl_ro_w1">some text</div></tr>
<tr class="record"><div class="mi_dl_ro_w1">some text</div></tr>
<tr class="record"><div class="mi_dl_ro_w1">some text</div></tr>
<tr class="record"><div class="mi_dl_ro_w1">some text</div></tr>
<tr class="record"><div class="mi_dl_ro_w1">some text</div></tr>

＆＃34; .mi_dl_ro_w1＆＃34;默认情况下（显示：无）并且它已固定在页面上。

我想要实现的是：当tr.record上的HOVER时，HOVERED tr.record的.mi_dl_ro_w1必须显示：block ...

这是我迄今为止所尝试过的，但它似乎无法发挥作用：（

jQuery('.record').on('mouseover', function (evt) {
          var $button = jQuery(this);
          var $tr = $button.parents('tr');
              var $div = $tr.find('.mi_dl_ro_w1');
              $div.toggle();
});

有人可以帮我一把吗？非常感谢你

Answer 1

jQuery('.record').on('mouseover', function (evt) {
          jQuery(this).find('.mi_dl_ro_w1').toggle();
});

Answer 2

首先，div的id必须是唯一的。您可以使用class =“mi_dl_ro_w1”替换id =“mi_dl_ro_w1”。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.record td {height:10px; width:70px;}
.mi_dl_ro_w1 {display:none;}
</style>
</head>
<body>
<table>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
<tr class="record"><td><div class="mi_dl_ro_w1">some text</div></td></tr>
</table>
<script>
$('.record').hover(
    function() {
        miToggle($(this));
    },
    function() {
        miToggle($(this));
    }
);
function miToggle(element) {
    if($(element).hasClass('record') || $(element).closest('tr').hasClass('record')) {
        $(element).find('.mi_dl_ro_w1').toggle();
    }
}
</script>
</body>
</html>

Answer 3

您可以使用jQuery的hover

$(".record").hover(
function () {
    $(this).find('.mi_dl_ro_w1').show();
},
function () {
    $(this).find('.mi_dl_ro_w1').hide();
});

<强> Fiddle

在具有相同类的悬停表行上切换显示

3 个答案: