Question

在JavaScript中，当其中一个项目被鼠标悬停时，是否可以突出显示具有相同类别的所有项目？

例如，如果我有两个带有p1类的段落和带有p2类的两个段落，我希望鼠标悬停时突出显示p1的两个元素，并且我还希望在鼠标悬停时突出显示p2的两个元素。

<p class = "p1">This should be highlighted on mouseover</p>
<p class = "p2">This should be highlighted on mouseover</p>
<p class = "p1">This should be highlighted on mouseover</p>
<p class = "p2">This should be highlighted on mouseover</p>

Answer 1

Here's a working example（需要JQuery）。当p1的成员被篡改时，p1的所有其他元素也会被突出显示。 p2也是如此。

JavaScript的：

function highlightAllOnMouseover(className){
    $(className).mouseover(function() {
  $(className).css("opacity", 0.4); 
  $(className).css("opacity", 1);
}).mouseleave(function() { 
    $(className).css("opacity", 0.4);
});
}
highlightAllOnMouseover(".thing1");
highlightAllOnMouseover(".thing2");

HTML：

<p class = "thing1">This is thing1.</p>
<p class = "thing2">This is thing2.</p>
<p class = "thing1">This is also thing1.</p>
<p class = "thing2">This is also thing2.</p>

要使具有特定类的所有元素在鼠标悬停时突出显示，您只需要调用我在此处创建的函数highlightAllOnMouseover(className)。

Answer 2

我忍不住觉得这个应该更简洁（使用三个 for (...)循环感觉不必要的昂贵），但一种方法：< / p>

Object.prototype.classHighlight = function (over, out) {
    var that = this.length ? this : [this];
    function onOver() {
        for (var i = 0, len = that.length; i < len; i++) {
            that[i].style.backgroundColor = over;
        }
    }
    function onOut() {
        for (var i = 0, len = that.length; i < len; i++) {
            that[i].style.backgroundColor = out;
        }
    }
    for (var i = 0, len = that.length; i < len; i++) {
        that[i].onmouseover = onOver;
        that[i].onmouseout = onOut;
    }
};

document.getElementsByClassName('test').classHighlight('#f90', '#fff');

JS Fiddle demo

Answer 3

这是一个零依赖性解决方案，应可用于非常老的JS版本：

将class = 'grp_N hovergrp'添加到悬停时应突出显示的所有元素上，将N替换为唯一描述一组元素的某个数字（或ID）。这些组可能不相交，具有hovergrp类的每个元素应完全属于一个grp_N类。
将JS中的以下<script>...</script>片段添加到<html>的末尾：

  // collect all highlighted elements and group them by their group 
  // name for faster access;
  // Attach onmouseover and onmouseout listeners.
  var groups = {};
  var hovergrp = document.getElementsByClassName("hovergrp"); 
  for (var i = 0; i < hovergrp.length; i++) {
    var e = hovergrp.item(i);
    var eClasses = e.classList;
    for (var j = 0; j < eClasses.length; j++) {
      var c = eClasses[j];
      if (c.startsWith("grp_")) {
        if (!groups[c]) {
          groups[c] = [];
        }
        groups[c].push(e);
        e.onmouseover = (function(c_capture) {
          return function(_event) {
            highlightGroup(c_capture, "orange");
          };
        })(c);
        e.onmouseout = (function(c_capture) {
          return function(_event) {
            highlightGroup(c_capture, "transparent");
          };
        })(c);
        break;
      }
    }
  }
  
  function highlightGroup(groupName, color) {
    var g = groups[groupName];
    for (var i = 0; i < g.length; i++) {
      g[i].style.backgroundColor = color;
    }
  }

  <pre><code>
    // hover over variable names `<span class='grp_0 hovergrp'>x</span>` and `<span class='grp_1 hovergrp'>f</span>`
    kroneckerDelta(<span class='grp_0 hovergrp'>x</span>) {
      return function(<span class='grp_1 hovergrp'>f</span>) {
        <span class='grp_1 hovergrp'>f</span>(<span class='grp_0 hovergrp'>x</span>)
      }
    }
  </code></pre>

<p class = "grp_p1 hovergrp">This should be highlighted on mouseover</p>
<p class = "grp_p2 hovergrp">This should be highlighted on mouseover</p>
<p class = "grp_p1 hovergrp">This should be highlighted on mouseover</p>
<p class = "grp_p2 hovergrp">This should be highlighted on mouseover</p>

HTML片段显示了用法示例：一组<pre>格式的小片段代码，其变量分为两组。只要将鼠标悬停在变量上，就会突出显示该变量的所有用法以及绑定站点。

当其中一个元素被鼠标悬停时，突出显示具有相同类别的所有元素

3 个答案: