gpt4 book ai didi

javaScript 确定将鼠标悬停在哪个 p 元素上以调用事件处理程序

转载 作者:行者123 更新时间:2023-12-03 08:44:42 24 4
gpt4 key购买 nike

我正在为一家零售商建立一个网站。我正在开发他们的商店位置页面,该页面有 4 个不同的街道位置。每个街道地址都包含在自己的段落标签中。所有四个段落都位于一个 div 容器内,该容器的 ID 名为“box_1”。

我编写了一个事件处理程序,用于更改第一个段落元素的背景颜色。但是,如果不需要的话,我不想为其他 3 段编写相同的冗余代码。

我希望 JS 首先确定哪个段落正在悬停,并获取其在数组中的位置,并将其加载到事件处理程序中的括号中。示例:将鼠标悬停在第 2 段上并将“1”加载到 element[1].onmouseover = function() {//我的代码};

下面是我到目前为止的代码:

<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";
};

最佳答案

您可以使用 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>

关于javaScript 确定将鼠标悬停在哪个 p 元素上以调用事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32939534/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com