onmouseover=“this.Stil... funktioniert, aber ich brauche so etwas onmouseover="this.Kind.Kind

Werden sollte, sehr einfach, aber ich kann nicht ankommen es zu wirken. Wie schon im Titel beschrieben würde ich gerne ändern, onmouseover hintergrund-Farbe aus span.name (orange)

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.style.backgroundColor = 'yellow'"; onmouseout="this.style.backgroundColor = 'green'"; >
    <span class="pdf-style">
        <span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
    </span>
</div>

Fand ich diese aber coul, würde es nicht funktionieren
Get-Element mit dem Klassennamen

Dies ist, was ich versuche: fiddle ist hier

Er hat nur die Arbeit in der FF

Danke für die Hilfe!

Nein ist es nicht. Ich will die orange Farbe, "TEST" ändern
warum gehst du nicht einfach css? developer.mozilla.org/en-US/docs/Web/CSS/:hover
Yep hab ihn jetzt sehen meine Antwort.
funktioniert nicht (es ist ein touch-screen) bitte Fragen Sie mich nicht warum, aber onmouseover funktioniert
oh - gut, dann, ja, schweben ist nicht relevant für ein touch-Gerät. nicht sicher, was die ux ist, das Sie hinzufügen schweben dann? sind Sie vielleicht auf der Suche nach :aktiven ? also, wenn Sie wirklich drücken Sie das element mit Ihrem finger?

InformationsquelleAutor caramba | 2013-07-04

html javascript

2

Ändern Sie Ihren code
```
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"; onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green'"; >
    <span class="pdf-style">
        <span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
    </span>
</div>
```
Demo: Fiddle
- Vielen Dank! Genau das, was ich suchte. Ich war auf der Suche und versuchen, über eine Stunde... Wo finde ich die javascript Informationen zu lernen, irgendwelche Empfehlungen?
- Es gibt eine tolle Seite namens Stack-Überlauf wo ein paar Leute haben gefragt, die gleiche Frage. Aber im ernst, Leute, versuchen, codecademy.com/tracks/javascript
InformationsquelleAutor Arun P Johny
3

Du suchst so etwas:
```
onmouseover="this.childNodes[1].childNodes[1].style.background='green'";
```
Dies ist ziemlich hässlich, aber eine bessere Lösung ist
```
span.name:hover {
    background:green;
}
```
in CSS.

Erklären, JS, falls es hilft:
```
this.childNodes
```
bekommt eine Liste von allen Kindern this.

Die erste im index [0] ist ein text-Knoten (der Zeilenumbruch).

Den zweiten, bei index [1] ist die Spanne, die Sie suchen.

Dann das gleiche tun für Sie, dass span.
- Ich dachte darüber nach, was darauf hindeutet, css, das problem mit den css-Grundlagen Lösung ist, wenn die Maus verlässt die grüne Farbe nicht bleiben. on mouse-over ist es gelb, auf ihn verlassen sollte grün sein, nicht die erste Farbe
- Beachten Sie auch, dass, obwohl die Spanne ist nicht die div ' s firstChild in Javascript, wäre es eine :first-child im CSS. Denn CSS zählt nur die Elemente, während Javascript zählt auch text-Knoten.
- Fair genug. Sieht für mich wie der OP wollte over/out-Effekt (hover), aber nicht schlimm.
- Danke Steve für die Erklärung! weil es auf einem touch-screen :hover funktioniert nicht, aber mouseover funktioniert (frag mich nicht warum). Ich würde geliebt haben, Sie zu verwenden :hover.. Danke!
- Beachten Sie auch, dass getElementsByClassName() wird nicht unterstützt, bis IE 9.0 🙁 vielleicht nicht ein problem in Ihrem Fall aber.
- Oh auch wenn Sie es vermeiden möchten, die "text-Knoten', was ich beschrieben habe, die Marmelade, die Ihre tags keine Zeilenumbrüche, wie <span><span><span>.
- Statt childNodes[1] wäre besser, wenn Sie verwenden firstElementChild
- Total verpasst, dass
InformationsquelleAutor Ben

Können Sie auch versuchen, diese

window.onload = function(){
    var span = document.querySelector('.name');
    //if you want to change the color to change onload
    span.style.backgroundColor = 'green';
    span.onmouseover = function(){
        this.style.backgroundColor = 'yellow';
    };
    span.onmouseout = function(){
        this.style.backgroundColor = 'green';
    };
};

Einfach den code zwischen Ihrem <head> tags wie diese

<head>
    <script type="text/javascript">
       //code goes here
    </script>
</head>

Beispiel.

InformationsquelleAutor The Alpha

Zusätzlich zu @ArunPJohny, solltest du besser CSS verwenden.

.pdf-icon-box:hover .name {
    background-color: orange;
}
.pdf-icon-box .name {
    background-color: green;
}

InformationsquelleAutor Uni-

0

Ich bin nicht sicher, warum kommst du nicht mit jquery.
```
$(".pdf-icon-box").hover(function(){
   $(this).find(".name").css("color","yellow") 
    //if you want to change background color
    $(this).find(".name").css("background","yellow")
});
```
- jsQuery wäre overkill in diesem Fall. Und Sie erst die Hälfte der Lösung.
- $(".pdf-icon-box").hover(function(){ $(this).finden(".name").css("color","gelb") //wenn Sie möchten, ändern Sie die Hintergrundfarbe $(this).finden(".name").css("background","gelb") }).mouseout(function(){$(this).finden(".name").css("background-color","green");}); . dies ist die vollständige Lösung, und ich bin nicht sicher, warum jquery "wäre übertrieben ".
InformationsquelleAutor Mohammad Ismail Khan

RAUM ist ein Kind. also, wenn u haben Leerzeichen zwischen u kann es nicht bekommen.

eine Möglichkeit ist, den code zu schreiben, ohne Leerzeichen und firstChild

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.firstChild.firstChild.style.backgroundColor = 'yellow'"; onmouseout="this.firstChild.firstChild.style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>

zweite Möglichkeit ist die Verwendung der childNodes[childelement] wieder : ein Leerzeichen/tab/neue Zeile ist ein Kind

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.childNodes[0].childNodes[0].style.backgroundColor = 'yellow'"; onmouseout="this.childNodes[0].childNodes[0].style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>

Dritte Möglichkeit ist die Verwendung der className

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"; onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green'"; >
 <span class="pdf-style">
  <span class="name" style="display:inline-block;"> T E S T </span>
 </span>
</div>

aber das ist keine schöne Art und Weise zu tun.
verwenden Sie css -

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.name{background-color:yellow;}
.name:hover{background-color:green;}
</style>
<body>
<div class="pdf-icon-box" style="position:relative;">
 <span class="pdf-style">
  <span class="name"> T E S T </span>
 </span>
</div>
</body>
</html>

InformationsquelleAutor cocco

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.