Question

NO JQUERY !!!!!!

我需要用纯JS编写这个。我在日历时间轴中有一堆元素，有些是由invoice_id链接的，所以我想在鼠标悬停在一个上时为所有匹配的类元素添加一个悬停类，然后在鼠标移出时删除悬停类。

我有鼠标在部分工作正常，但我正在努力让鼠标输出工作。

这是我的JS：

function highlightRange(id)
{
 var d = document.getElementsByClassName('invoiceCell' + id);   // get all the elements

d.className += "hover";                                         // add the hover class

for (var i = 0; i < d.length; i++) {                            // remove the hidden class
   d[i].classList.remove('hidden');
}

// now how to I bind the mouseout event??
}

我有一个运行jQuery的类似脚本，但是在这种情况下我不能使用jQuery。

jQuery版本如下所示：

function highlightRange(id)
{
$(".price_cell_"+id).addClass('hover');

$(this).bind("mouseout", function(){
    $(".price_cell_"+id).removeClass('hover');
})
}

回复后编辑：

function highlightRange(id)
{
var d = document.getElementsByClassName('invoiceCell' + id);    // get all the elements

d.className += "hover";                                         // add the hover class

for (var i = 0; i < d.length; i++)                              // remove the hidden class
{
   d[i].classList.remove('hidden');

   d[i].on('mouseout', function(){
        d[i].classList.remove('hover');
        d[i].className += "hidden";
    });
}
}

Answer 1

这就是你要找的东西吗？

object.addEventListener("mouseout", function(){
...
});

Vanilla JavaScript绑定mouseout事件

1 个答案: