CSS悬停＆＃34;通过＆＃34;元素没有阻止点击

Question

注意：我无法访问HTML或javascript代码

我正在使用优秀的Chrome插件Web Override来提高我公司使用的供应商网站的可用性。我只是在寻找CSS解决方案（或者可能是我可以加载的js / jq脚本）。

我试图在悬停时设置表格行以突出显示，这很容易：

#task-list-main-table tr:hover {
    background-color: lightyellow;
}

问题是当您将鼠标悬停在每一行上时，每个行上都会显示一个小按钮。这意味着如果我将鼠标悬停在按钮上，则相应的行不会突出显示。

好：

为：

我知道我可以使用pointer-events:none但是我再也无法点击按钮了，我需要这样做。

所以，在CSS中是否有任何方式可以通过＆＃34;悬停事件而不影响点击事件？

Answer 1

这是一个非常复杂的方法，但是如果你能够注入javascript，这个函数将检查你的鼠标是否与你作为选择器提供的任何元素重叠。

https://jsfiddle.net/tr_santi/aegybp6n/8/

//Change this value to desired element
var hoverElement = "td";

//Change this value to the class you'd like to add when hovering
var addClass = "hover";

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function overlapListener(element, x, y, classToAdd) {
   var eTop = getOffset(element).top;
   var eLeft = getOffset(element).left;
   var eBottom = eTop + element.clientHeight;
   var eRight = eLeft + element.clientWidth;
   if (x <= eRight && x >= eLeft && y <= eBottom && y >= eTop) {
      if (!hasClass(element, classToAdd)) {
         element.className = classToAdd;
      }
   } else {
      if (hasClass(element, classToAdd)) {
         element.className = "";
      }
   }
}

var elementList = document.querySelectorAll(hoverElement);

document.onmousemove=function(e){
   [].forEach.call(elementList, function(b) {
       overlapListener(b, e.clientX, e.clientY, addClass)
   });
};

我确信这里有一些JS大师可以给你写一些不那么混淆的东西，但我觉得这对我自己来说是一个很好的练习。我选择用vanilla JS编写它，因为我不确定你的限制是什么，尽管JQuery可以大大减少所需代码的数量。