javascript - focusin 事件.addclass

Question

我有一个包含这样一列的数据表

这是我的HTML

<td class="orders-options column-invoice">
    <strong>
        <a class="row-title" href title="View detail">78060</a>
    </strong>
    <div class="locked-info"></div>
    <div class="row-actions">
        <span class="edit">Edit</span>
        <span class="view">View</span>
    </div>
</td>

我想在用户将鼠标悬停在 上时显示某些选项，例如“编辑”或“查看”。我的计划是添加类，以便它的可见性:更改隐藏；可见；根据 CSS 文件。

这是我的JS

$("td.orders-options").focusin(function() {
  $(this).find(".row-actions").addClass('visible'); 
});
$("td.orders-options").focusout(function() {
  $(this).find(".row-actions").removeClass('visible'); 
});

然而，这似乎对 html 没有任何影响。我也很好奇这个函数是只在焦点上改变类还是在其他没有焦点的地方改变类

Answer 1

您可以使用 mouseover 和 mouseout 或简单的 hover。

$("td.orders-options").mouseenter( function() {
     $(this).find(".row-actions").addClass('visible'); 
}).mouseleave( function() {
     $(this).find(".row-actions").removeClass('visible'); 
});

此外，在 css 中切换 display 属性而不是可见性。因为 visibility:hidden 会占用空间，尽管它是隐藏的。

在 hover 方面，它就像:

$("td.orders-options").hover( function() {
     $(this).find(".row-actions").addClass('visible'); 
} ,function() {
     $(this).find(".row-actions").removeClass('visible'); 
});

Update: Adding DEMO

$("td.orders-options").hover( function() {
  console.log("Rias");
 $(this).find(".row-actions").addClass('visible'); 
} ,function() {
 $(this).find(".row-actions").removeClass('visible'); 
});

.row-actions.visible {
  display: block;
}

.row-actions {
  display: none;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<table>
<td class="orders-options column-invoice">
<strong>
    <a class="row-title" href title="View detail">78060</a>
</strong>
<div class="locked-info"></div>
<div class="row-actions">
    <span class="edit">Edit</span>
    <span class="view">View</span>
</div>
</td>
  </table>