Javascript onmouseover and onmouseout

对着背影说爱祢 提交于 2019-12-30 05:27:11

问题


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

回答1:


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/




回答2:


Your html should be something like this:

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

As you can see, we have different ids for your elements, and we pass the ids through the function that we trigger with onlouseover and onmouseout.

For your javascript, your code could be something like this:

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

For normal() and hover() we receive an id and change the style for the current element that have this id.

Please, check this JSFiddle that I've built for you.



来源:https://stackoverflow.com/questions/20013022/javascript-onmouseover-and-onmouseout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!