Question

我有一个简单的jquery脚本来突出显示悬停时的DOM元素。但是这个脚本无法突出显示我的表格行，细胞没有问题。

在我的脚本中，我需要能够选择任何类型的元素，而不仅仅是表格，因此我无法根据表格选择编写解决方案，例如DataTables。有什么建议吗？

$(document).ready(function() {
  $("body").on('mouseover', function(event) {
    var highlightTarget = $(event.target);
    highlightTarget.addClass("highlight");

  }).on('mouseout', function(event) {
    $(event.target).removeClass('highlight');
  });
});

.highlight {
  border: 1px solid green;
  background-color: darkseagreen;
  z-index: 99999;
}
.main {
  border-top: 1px solid #9EBACF;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #9EBACF;
  border-right: 1px solid #FFFFFF;
}
.cat {
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #9EBACF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #9EBACF;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main" cellspacing="0" cellpadding="4">
  <tr>
    <td class="cat">data 1</td>
    <td class="cat">data 2</td>
  </tr>
  <tr>
    <td class="cat">data 3</td>
    <td class="cat">data 4</td>
  </tr>
  <tr>
    <td class="cat">data 5</td>
    <td class="cat">data 6</td>
  </tr>
</table>

Answer 1

使用CSS执行此操作的一种方法是使用:hover选择器。

.hoverable:hover {
    background: rgba(150, 150, 150, 0.5);
}

将突出显示班级.hoverable的所有元素。请注意，在以下示例中，在悬停第一行时，<tr>和<td>都会突出显示。在第二行中，仅突出显示<td>，而在第三行中，仅突出显示<tr>。

.hoverable:hover {
  background: rgba(180, 180, 180, 0.5);
}

<table class="main" cellspacing="0" cellpadding="4">
  <tr class="hoverable">
    <td class="hoverable">data 1</td>
    <td class="hoverable">data 2</td>
  </tr>
  <tr>
    <td class="hoverable">data 3</td>
    <td class="hoverable">data 4</td>
  </tr>
  <tr class="hoverable">
    <td>data 5</td>
    <td>data 6</td>
  </tr>
</table>

Answer 2

逻辑

在每个元素上绑定鼠标事件。
为要考虑父级的元素创建地图。
现在，在悬停时，只需检查地图是否具有此元素类型的值。
如果是，请获取父选择器并导航到它。
如果没有，请使用当前元素作为默认元素。
从任何其他元素中删除类
将类添加到存储元素。

注意：步骤6是必需的，因为您将拥有div。这个div有一个table，直到td，但你只想访问当前元素，而不是全部。

示例

＆＃13;

$(document).ready(function() {
  createHover()
});

function createHover() {
  const map = {
    "TD": "tr"
  }
  $(document).on('mouseenter mouseout', '*', function(e) {
    var myClass = "highlight"
    var parent = map[this.nodeName];
    var $this = $(this)
    var el = $this;
    $('.' + myClass).removeClass(myClass)
    if (parent) {
      el = $this.closest(parent)
    }
    el.toggleClass(myClass, $this.is(":hover"))
    e.stopPropagation()
  })
}

＆＃13;

.highlight {
  border: 1px solid green;
  background-color: darkseagreen;
}
.main {
  border-top: 1px solid #9EBACF;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #9EBACF;
  border-right: 1px solid #FFFFFF;
}
.cat {
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #9EBACF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #9EBACF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<body>
  <table class="main" cellspacing="0" cellpadding="4">
    <tr>
      <td class="cat">
        <strong>Edge case</strong>
      </td>
      <td class="cat">data 2</td>
    </tr>
    <tr>
      <td class="cat">data 3</td>
      <td class="cat">data 4</td>
    </tr>
    <tr>
      <td class="cat">data 5</td>
      <td class="cat">data 6</td>
    </tr>
  </table>
  <ul>
    <li>This is a test</li>
  </ul>
  <p>This is also a test</p>
</body>

＆＃13;

Answer 3

你不需要JS，简单的css悬停就可以了：

.cat:hover{
  border: 1px solid green;
  background-color: darkseagreen;
  z-index: 99999;
}

你不需要.highlight

如何使用jquery突出显示表中的行

3 个答案:

逻辑

示例