如何在鼠标悬停事件上显示警报

时间:2017-08-22 16:33:54

标签: javascript html css

目前,具有鼠标悬停功能,将鼠标放在鼠标悬停时将div更改为红色。我想改变它以改为弹出警告,显示div中保存的文本。

我试过调用一个函数来调用警报

<img onmouseover='getAlert(this)' class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>

以及

document.getElementsByClassName("calPicSmile").onmouseover = function() {getAlert()};
function getAlert(){
  alert('test');
}

if (counter == day && month == curMonth && year == curYear) {

  htmlContent += "<td class='dayNow alert' id='" + counter + monthIDName + "'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " + "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

} else {

  htmlContent += "<td class='monthNow alert' id='" + counter + monthIDName + "' onMouseOver='this.style.background=\"#FF0000\"'" + " onMouseOut='this.style.background=\"#FFFFFF\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

}

2 个答案:

答案 0 :(得分:2)

&#13;
&#13;
<html>
<body>
<script>
function Alert(e){
 alert(e.target.innerText);
};

</script>

<div onmouseover="Alert(event)">Hover Me</div>

</body>
</html>
&#13;
&#13;
&#13;

这是你想要的吗?

答案 1 :(得分:1)

如果你不必发布完整的代码,你是否想要实现这样的目标?

function getAlert(image) {
  alert('Here\'s an alert!')
}
<img onmouseover='getAlert(this)' class='calPicSmile' src='https://images-production.global.ssl.fastly.net/uploads/photos/file/117262/michae-scott-quotes-5.jpg?auto=compress&crop=top&fit=clip&h=500&q=55&w=698' height='100' width='140'>