Javascript onmouseover和onmouseout

你可以在标题中看到它是什么.我有四个“div”,其中每个都是一个p标签.当我在第一个div上使用鼠标时,更改第一个div的p标签的“不透明度”.问题是,当我继续使用第二个或第三个“div”上的鼠标时,只更改第一个“div”中的标记“p”.它应该改变自己的“p”标签.
重要的是,我不能使用CSS“：悬停”.
问题很明显,就是所有人都有相同的“id”.
我需要一个javascript,它不会单独枚举所有不同的类.

我很抱歉我的英语.
我希望你能理解我.
我的剧本：

<div onm ouseout="normal();" onm ouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onm ouseout="normal();" onm ouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onm ouseout="normal();" onm ouseover="hover();" >
    <p id="something">LOLOL</p>
</div>
<div onm ouseout="normal();" onm ouseover="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;
}

解决方法:

正如Paul S.建议的那样,你需要将它传递给函数,以便它知道它必须处理哪个元素.

<div onm ouseout="normal(this);" onm ouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onm ouseout="normal(this);" onm ouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onm ouseout="normal(this);" onm ouseover="hover(this);" >
    <p>LOLOL</p>
</div>
<div onm ouseout="normal(this);" onm ouseover="hover(this);" >
    <p>LOLOL</p>
</div>

然后选择子元素< p>对于传递的< div>.在这里,我选择第一个子p,即带有标记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/

标签：html,javascript,css,onmouseover,onmouseout
来源： https://codeday.me/bug/20191006/1858845.html