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>

然后为传递的<div>选择子元素<p>。这里我选择第一个子元素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/

Answer 2

你的 html 应该是这样的：

<div onmouseout="normal(1);" onmouseover="hover(1);">
  <p id="something-1">LOLOL</p>
</div>
<div onmouseout="normal(2);" onmouseover="hover(2);">
  <p id="something-2">LOLOL</p>
</div>
<div onmouseout="normal(3);" onmouseover="hover(3);">
  <p id="something-3">LOLOL</p>
</div>
<div onmouseout="normal(4);" onmouseover="hover(4);">
  <p id="something-4">LOLOL</p>
</div>

如您所见，我们为您的元素设置了不同的 id，我们通过使用 onlouseover 和 onmouseout 触发的函数传递这些 id。

对于您的 javascript，您的代码可能是这样的：

function normal(id) {
  var something = document.getElementById('something-'+id);
  something.style.opacity = "0.5";
}

function hover(id) {
  var something = document.getElementById('something-'+id);
  something.style.opacity = "1";
}

对于 normal() 和 hover()，我们会收到一个 id 并更改具有此 id 的当前元素的样式。

拜托，check this JSFiddle 我为你打造的。