javaScript來確定哪個p元素被懸停以調用事件處理程序

我正在爲零售商構建網站。我在他們的商店位置頁面上工作，該頁面有4個不同的街道位置。每個街道地址都包裹在自己的段落標記中。所有四個段落都在一個名爲「box_1」的ID容器中。javaScript來確定哪個p元素被懸停以調用事件處理程序

我寫過一個事件處理程序，它改變了第一個段落元素的背景顏色。但是，如果我不需要，我不想爲其他3段編寫相同的冗餘代碼。

我希望JS首先確定哪個段落被懸停，並將它放在數組中，並將其加載到事件處理程序的括號中。示例：將鼠標懸停在段落2上並將「1」加載到元素[1] .onmouseover = function（）{// my code};

下面是我到目前爲止的代碼：

<div id="box_1"> 
<p>18901 Kansas Avenue, Jimmytown, NE </p> 
<p>5015 Cornman Lane, Crybaby, MN </p> 
<p>847 Halfstack Avenue, Crumble, GA </p> 
</div> 

// javaScript: 
var divPoint = document.getElementById("box_1"); // ID for the div 
var mousePoint = divPoint.getElementsByTagName("p"); // p elements inside div 

// mouseover event handler 
mousePoint[0].onmouseover = function() { 
mousePoint[0].style.backgroundColor = "#a80"; 
};

來源

2015-10-04 CP Creative Studio

首先，將活動附加到div。在onmouseover函數中，可以有一個變量名稱event。然後，請致電event.target以獲取觸發事件的元素。

您可能還想執行onmouseout也清除背景。這是代碼。可以在JsFiddle上測試。請致電W3Schools。

來源

2015-10-05 01:07:38 AnhTriet

您可以用CSS做到這一點，沒有必要的JavaScript。如果因爲任何原因必須使用js，請將事件置於div並使用事件目標來選擇正確的p元素。

<html> 
<head> 
    <title>title</title> 
    <style> 
     #box_1 > p:hover { 
      background-color: #a80; 
     } 
    </style> 
</head> 
<body> 
<div id="box_1"> 
    <p>18901 Kansas Avenue, Jimmytown, NE </p> 
    <p>5015 Cornman Lane, Crybaby, MN </p> 
    <p>847 Halfstack Avenue, Crumble, GA </p> 
</div> 
</body> 
</html>

來源

2015-10-04 23:46:57 Shilly

javaScript來確定哪個p元素被懸停以調用事件處理程序

回答

相關問題