html - Javascript onmouseover and onmouseout - Stack Overflow

admin管理员组

文章数量:1287484

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

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

• javascript
• html
• css
• onmouseover
• onmouseout

Share Improve this question Follow edited Jul 5, 2014 at 10:46 asked Nov 16, 2013 at 0:26 user2628521user2628521 3

• 5 An id attribute should be unique. This HTML is invalid. You seem to also be missing a } at the end of your JavaScript and the functions hover and normal don't even target the same Node. – Paul S. Commented Nov 16, 2013 at 0:27
• I'm sorry, I have dedicated myself, I've improved it. – user2628521 Commented Nov 16, 2013 at 0:36
• Once you have valid HTML, consider how you want to distinguish between the first and second items. For example, pass this into your function call and work from it within the function. Alternatively, take some other parameter which lets you know which <p> to target, and pass that as an argument when invoking your functions. – Paul S. Commented Nov 16, 2013 at 0:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/mastazi/2REe5/

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.

本文标签： htmlJavascript onmouseover and onmouseoutStack Overflow