我有一个嵌在div标签中的p标签。 div标签附有一个mouseover事件处理程序,p标签没有事件处理程序。 我希望能够触发鼠标悬停事件,无论我在div标签中的哪个位置,我都会将鼠标悬停在上。此时,鼠标悬停的触发方式会有所不同,具体取决于我是在文本上还是在div标签的另一部分上。
function btnColorChange(evt){
var evtTrgt = evt.target;
evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
evtTrgt.style.color="rgb(233, 234, 235)";
evtTrgt.style.cursor = "pointer";
setTimeout(function(){
evtTrgt.style.color = "#330000";
evtTrgt.style.backgroundColor = "rgba(41, 82, 163,.5)";
}, 800);
}
var the_btns = document.getElementsByClassName("btn_ovrly");
for (var i = 0; i < the_btns.length; i++){
the_btns[i].addEventListener("mouseover", function(event){
btnColorChange(event);
}, true);
}
HTML - 包含相关代码的代码段
<div id="chrts_ovrly">
<div id="btn_ovrly_l" class="btn_ovrly"><p>L text</p></div>
<div id="btn_ovrly_r" class="btn_ovrly"><p>R text</p></div>
</div>
按钮说明: 1:默认按钮状态 2:鼠标悬停在div而不是文本时的按钮 3:鼠标悬停文本后的按钮 - 文本颜色已更改 4:初始鼠标悬停文本后的按钮,现在只将鼠标悬停在div上 5:初始鼠标悬停文本后的按钮,现在鼠标悬停在文本上
我认为这与事件冒泡捕获有关,但我不确定。任何帮助,以便鼠标悬停是一致的将是伟大的。
还有一条信息,我还在div标签上附加了一个点击事件。单击div时单击事件可以正常工作,但当我的鼠标悬停在文本上时单击时它不起作用。
答案 0 :(得分:1)
当鼠标可能仍在目标空间中时,设置超时以撤消鼠标悬停样式是很常见的。你可能想要更多这方面的东西:
function btnColorChange(evt){
var evtTrgt = evt.target;
evtTrgt.style.backgroundColor = "rgb(41, 82, 204)";
evtTrgt.style.color="rgb(233, 234, 235)";
evtTrgt.style.cursor = "pointer";
evtTrgt.addEventListener("mouseout", undo);
}
var c = document.getElementById("chrts_ovrly")
c.addEventListener("mouseover", function(event){
btnColorChange(event);
}, true);
function undo(evt) {
var evtTrgt = evt.target;
evtTrgt.style.color = "yellow";
evtTrgt.style.backgroundColor = "gray";
evtTrgt.removeEventListener("mouseout", undo);
}