Javascript onmouseover和onmouseout [英] Javascript onmouseover and onmouseout

问题描述

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

我对不起我的英文。
我希望你能理解我。
我的脚本：

 < div onmouseout =normal（）;的onmouseover = 悬停（）; > 
< p id =something> LOLOL< / p> 
< / div> 
 
< p id =something> LOLOL< / p> 
< / div> 
 
< p id =something> LOLOL< / p> 
< / div> 
 
< p id =something> LOLOL< / p> 
< / div> 
  

Javascript：

  function normal（）{
 var something = document.getElementById（'something'）; 
 something.style.opacity =0.5; 
} 
函数hover（）{
 var something = document.getElementById（'something'）; 
 something.style.opacity =1; 
  

CSS：

  p {
 opacity：0.5; 
颜色：红色; 
 
  

解决方案

你需要将这个传递给该函数，以便它知道它必须处理哪个元素。

 < div onmouseout =normal（this）;的onmouseover = 悬停（本）; > 
< p> LOLOL< / p> 
< / div> 
< div onmouseout =normal（this）;的onmouseover = 悬停（本）; > 
< p> LOLOL< / p> 
< / div> 
< div onmouseout =normal（this）;的onmouseover = 悬停（本）; > 
< p> LOLOL< / p> 
< / div> 
< div onmouseout =normal（this）;的onmouseover = 悬停（本）; > 
< 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/

You can see in the headline what it is. I've four "div", and therein are each a p tag. When I go with the mouse on the first div, changes the "opacity" of the p tag of the first div. The problem is when I go on with the mouse on the second or third "div" only changes the tag "p" from the first "div". It should changes the their own "p" tags. And it is important, that i cannot use CSS ":hover". The problem is clear, it is that all have the same "id". I need a javascript which does not individually enumerated all the different classes.

I' sorry for my english. I hope you understand me. My script:

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

解决方案

As Paul S. suggests, you need to pass this to the function so that it knows which element it has to work on.

<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>

And then select the child element <p> for the passed <div>. Here I select the first child p, i.e. the first element in the array of children of this element with tag p, that's why you see [0]. So if in each div you had two paragraph, then you could use e.g. getElementsByTagName("p")[1] to select the second <p>.

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

See the working example here: http://jsfiddle.net/mastazi/2REe5/

这篇关于Javascript onmouseover和onmouseout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！