Javascript onmouseover 和 onmouseout

Question

您可以在标题中看到它是什么。我有四个“div”，其中每个都有一个 p 标签。当我将鼠标放在第一个 div 上时，更改第一个 div 的 p 标签的“不透明度”。问题是当我继续将鼠标放在第二个或第三个“div”上时，只会更改第一个“div”中的标签“p”。它应该更改自己的“p”标签。 重要的是，我不能使用 CSS ":hover"。 问题很明显，就是都拥有相同的“id”。 我需要一个不会单独枚举所有不同类的 javascript。

对不起我的英语。 我希望你能理解我。 我的脚本:

<div onmouseout="normal();" onmouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
    <p id="something">LOLOL</p>
</div>

Javascript:

function normal() {
var something = document.getElementById('something');
something.style.opacity = "0.5";
}
function hover() {
var something = document.getElementById('something');
something.style.opacity = "1";

CSS:

p {
    opacity: 0.5;
    color: red;
}

Answer 1

正如 Paul S. 建议的那样，您需要传递 this到函数，以便它知道它必须处理哪个元素。

<div onmouseout="normal(this);" onmouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
    <p>LOLOL</p>
</div>

然后选择子元素<p>对于过去的<div> .这里我选择第一个 child p ，即 this 的子数组中的第一个元素带有标签的元素 p ，这就是为什么你看到 [0] .因此，如果在每个 div 中你有两个段落，那么你可以使用例如getElementsByTagName("p")[1]选择第二个 <p> .

function normal(mydiv) {
    mydiv.getElementsByTagName("p")[0].style.opacity="0.5";
}
function hover(mydiv) {
    mydiv.getElementsByTagName("p")[0].style.opacity="1";
}

请参阅此处的工作示例:http://jsfiddle.net/mastazi/2REe5/