悬停在多个元素上时只触发一个onmouseover

Question

我想要下面这样的基本代码：

<span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span>

但是，如果这两个事件都被悬停，我希望它不要同时触发这两个事件；例如，如果我悬停在“this”上，它应该只触发它的事件并警告“hello”。我怎么能这么做？

提前谢谢！

Answer 1

我将假设重叠元素的大小不相同。即一个比另一个大。

HTML和内联JS：

<span class="container" id="hi"> 
 Hello, 
 </span> 
 <span class="container " id="hello">
 this </span>
<script>
 var hello =   
document.getElementById("hello");          
   var this =       
  document.getElementById
    ("this");
    hello.addEventListener("click
   ",pop("hello"));                                                                  


this.addEventListener("click",pop(" hi");
 function pop(string) {
 window.alert(string);
}
 <\script>

话虽这么说，但很少提到元素的性质，this和hello。操作plz显示您的CSS和更新问题

Answer 2

null

$(".container").hover(function(){
    alert($(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="container" id="hi">
Hello,
</span>
<span class="container" id="hello">
this
</span>
<span class="container" id="hi">
is a test
</span>