当鼠标悬停在元素上时显示警告

Show an alert when hover on elements

本文关键字：显示 警告 元素 鼠标 悬停      更新时间：2023-09-26

我想显示一个警告，当我悬停在具有类包装器属性的div上时，div的数量没有属性类包装器。这似乎很容易，但我就是看不出我做错了什么。这是代码:

<!DOCTYPE html> 
<html> 
<head>
</head>
<body>
<div class ="wrapper"> <p> aa </p> </div>
<div class ="wrapper"> <p> dd </p> </div>
<div class ="wrapper"> <p> cc </p> </div>
<div> <p> bb </p> </div> 
<div> <p> bb </p> </div> 
<div> <p> bb </p> </div> 
</body>
<script type ="text/javascript">
var divs = document.getElementsByClassName('wrapper');
var ps =document.getElementsByTagName('p');
for (var i=0; i<divs.length; i++){
divs[i].onhover =function(){
var intervalId = setInterval(function(){
alert(ps.length - divs.length)},5000);
setTimeout(function(){clearInterval(intervalId);},25000);
}
}
</script>
</html>

您可以使用document.getElementsByTagName获得div和的总数document.getElementsByClassName使用class wrapper获取div

然后使用addEventListener将mouseover事件添加到此div 

var getTotoalDiv = document.getElementsByTagName('div');
var divs = document.getElementsByClassName('wrapper');
var divWithoutWrapper = (getTotoalDiv.length - divs.length);
// Converting nodelist to array since `divs` is a HTMLCollection
var getNodesArray = Array.prototype.slice.call(divs);
getNodesArray.forEach(function(item) { //using array#forEach method to loop 
  item.addEventListener('mouseover', function() {
    alert(divWithoutWrapper)
  })
});

JSFIDDLE 

Please try tis code 
<script type ="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
    if(divs[i].getAttribute('class') != 'wrapper'){
        divs[i].addEventListener('mouseover',function(){
            alert('class'); 
        })
    }
}
</script>
</html>
相关文章：