CSS悬停“；透过「；元素而不阻塞单击

注意：我没有访问HTML或javascript代码的权限

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

我正在尝试将表行设置为在悬停时高亮显示，这非常简单：

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

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

好:

坏的：

我知道我可以使用

指针事件：无

，但是我不能再单击按钮，我需要能够这样做

---

因此，CSS中是否有任何方法可以“传递”悬停事件而不影响单击事件？

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

//将此值更改为所需元素
var hoverElement=“td”；
//将此值更改为悬停时要添加的类
var addClass=“悬停”；
函数getOffset（el）{
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x}；
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
函数重叠侦听器（元素、x、y、类添加）{
var eTop=getOffset（元素）.top；
var eLeft=getOffset（元素）.left；
var eBottom=eTop+element.clientHeight；
var eRight=eLeft+element.clientWidth；
如果（x=eLeft&&y=eTop）{
如果（！hasClass（元素，类添加））{
element.className=classToAdd；
}
}否则{
if（hasClass（元素，类添加））{
element.className=“”；
}
}
}
var elementList=document.querySelectorAll（hoverElement）；
document.onmousemove=函数（e）{
[]forEach.call（元素列表，函数（b）{
重叠侦听器（b，e.clientX，e.clientY，addClass）
});
};

---

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

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

//将此值更改为所需元素
var hoverElement=“td”；
//将此值更改为悬停时要添加的类
var addClass=“悬停”；
函数getOffset（el）{
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x}；
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
函数重叠侦听器（元素、x、y、类添加）{
var eTop=getOffset（元素）.top；
var eLeft=getOffset（元素）.left；
var eBottom=eTop+element.clientHeight；
var eRight=eLeft+element.clientWidth；
如果（x=eLeft&&y=eTop）{
如果（！hasClass（元素，类添加））{
element.className=classToAdd；
}
}否则{
if（hasClass（元素，类添加））{
element.className=“”；
}
}
}
var elementList=document.querySelectorAll（hoverElement）；
document.onmousemove=函数（e）{
[]forEach.call（元素列表，函数（b）{
重叠侦听器（b，e.clientX，e.clientY，addClass）
});
};

---

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

从结构上看，这个按钮是您试图突出显示的行的子按钮吗？不幸的是，不。它在文档中处于较高的级别，只是隐藏/显示，

top

在行悬停时进行了调整。您是否能够使用JS，而不是用于显示按钮的内容？是的，Web Override支持JS。从技术上讲，是的。@Scott在这种情况下，当鼠标光标的x&y落在元素的边界内时，您可以使用脚本添加一个类，并且该类在退出时被删除。这样，框就不会寻找光标悬停，比如说，javascript只会检查“光标是否在行的边界内”。从结构上看，这个按钮是您试图高亮显示的行的子按钮吗？不幸的是，不。它在文档中处于较高的级别，只是隐藏/显示，

top

在行悬停时进行了调整。您是否能够使用JS，而不是用于显示按钮的内容？是的，Web Override支持JS。从技术上讲，是的。@Scott在这种情况下，当鼠标光标的x&y落在元素的边界内时，您可以使用脚本添加一个类，并且该类在退出时被删除。这样的话，框就不会寻找光标悬停，比如说，javascript只会检查“光标是否在行的边界内”。我知道您正在处理它。如果有帮助的话，这里有一个问题的模拟：@Scott那么类似的东西，也许是这样的如果这是可行的，你可以使用jQuery，让我知道我可以把它缩小一点。很明显，这在你的小提琴上是可行的，但由于某些原因，它在网站上不起作用：（它在哪里

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