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'); 
});

  

更新：添加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>

Answer 2

您应该使用.hover()。.hover()方法指定当鼠标指针悬停在所选元素上时要运行的两个函数：

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

Answer 3

使用toggelclass轻松实现目标

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