Javascript onmouseover und onmouseout

Sehen Sie in der überschrift, was es ist. Ich habe vier "div", und darin sind jeweils ein p-tag. Wenn ich mit der Maus auf das erste div, ändert die "Deckkraft" der p-tag des ersten div. Das problem ist, wenn ich mit der Maus auf die zweite oder Dritte "div" ändert nur das tag "p" aus dem ersten "div". Sollte es änderungen, die auch Ihre eigene "p" - tags.
Und es ist wichtig, dass ich nicht mit CSS ":hover".
Das problem ist klar, es ist, dass alle das gleiche "id".
Ich brauche ein javascript, die nicht einzeln aufgezählt all die verschiedenen Klassen.

Ich' tut mir Leid für mein Englisch.
Ich hoffe, Sie verstehen mich.
Mein Skript:

<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;
}
Ein id-Attribut sollte einzigartige. Diese HTML ist ungültig. Sie scheinen auch fehlt eine } am Ende Ihres JavaScript und die Funktionen hover und normal gar nicht Ziel der gleichen - Knoten.
Tut mir Leid, hab mich verschrieben, ich habe es verbessert.
Sobald Sie einen gültigen HTML, überlegen Sie, wie Sie wollen, zu unterscheiden zwischen der ersten und zweiten Elemente. Zum Beispiel, pass this in Ihrer Funktion aufrufen und arbeiten innerhalb der Funktion. Alternativ nehmen einige andere parameter, die Sie wissen lässt,, die <p> zum Ziel und pass, der als argument beim Aufruf Ihrer Funktionen.

InformationsquelleAutor DOCTYPE HTML | 2013-11-16

  1. 4

    Als Paul S. schlägt vor, den Sie brauchen, um passieren this die Funktion, also dass er weiß welches element er hat.

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

    Und wählen Sie dann das untergeordnete element <p> für die übergebene <div>. Hier wähle ich das erste Kind p, D. H. das erste element im array der Kinder this element mit tag p, das ist, warum Sie sehen [0]. Also, wenn in die einzelnen div-Sie hatte zwei Absatz -, dann könnten Sie z.B. getElementsByTagName("p")[1] wählen Sie die zweite <p>.

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

    Siehe das Beispiel hier: http://jsfiddle.net/mastazi/2REe5/

    Ich danke Ihnen für Ihre Antwort
    Sie sind willkommen, mate
    Ich habe Probleme mit dem IE. Wenn ich will, um einen filter setzen, doch es funktioniert nicht für den IE. jsfiddle.net/3mKFa
    Ich denke, dass Sie falsch contact statt content welches der parameter ist, der von der Funktion akzeptierte. Auch sind Sie der Auswahl eine img element, das nicht in der html-als Kind des div übergeben. Darüber hinaus sind Sie mit einem Webkit-filter, die, soweit ich weiß, funktionieren nicht im IE. Endlich, ich bin nicht sicher, dass die Art und Weise, die Sie Bearbeiten -webkit-filter ist korrekt, siehe hier: stackoverflow.com/questions/12297350/...

    InformationsquelleAutor mastazi

  2. 2

    Ihres html sollte so etwas wie dieses:

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

    Wie Sie sehen können, haben wir verschiedene ids für Elemente, und wir passieren die ids durch die Funktion, die wir auslösen, mit onlouseover und onmouseout.

    Für Ihren javascript-code könnte so etwas wie dieses:

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

    Für normal() und hover() wir erhalten eine id und ändern Sie den Stil für das aktuelle element mit dieser id.

    Bitte, überprüfen Sie dieses JSFiddle , ich habe für Sie gebaut.

    Ich danke Ihnen für Ihre Antwort
    Ich habe Probleme mit dem IE. Wenn ich will, um einen filter setzen, doch es funktioniert nicht für den IE. jsfiddle.net/3mKFa

    InformationsquelleAutor Leonardo Barbosa

Schreibe einen Kommentar