Question

你可以在标题中看到它是什么。我有四个“div”，其中每个都是一个p标签。当我在第一个div上使用鼠标时，更改第一个div的p标签的“不透明度”。问题是，当我继续使用第二个或第三个“div”上的鼠标时，只更改第一个“div”中的标记“p”。它应该改变自己的“p”标签。重要的是，我不能使用CSS“：悬停”。问题很明显，就是所有人都有相同的“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>。在这里，我选择了第一个子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。

Javascript onmouseover和onmouseout

2 个答案: