Hover auf Element und markieren Sie alle Elemente mit der gleichen Klasse

Ich habe viele Elemente mit der gleichen Klasse auf einer Webseite. Ich möchte all diese Elemente hervorheben, wenn ich einen von ihnen schwebe. Wie kann ich das in CSS tun?Hover auf Element und markieren Sie alle Elemente mit der gleichen Klasse

Gerade jetzt, ich habe diese CSS:

p.un:hover { background-color:yellow;}

Und mein HTML:

<div class="book"> 
    <div class="page left"> 
    <p class="un">Karen…</p> 
    </div> 
    <div class="page right"> 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p> 
    </div>

Quelle

2012-10-08 Justin D.

Sie müssen Javascript verwenden .. –

CSS ist in erster Linie ein Elternteil -> Kind-Beziehung. Es gibt Geschwister-Selektoren (http://css-tricks.com/child-and-sibling-selectors/), aber dies funktioniert nur, wenn die Elemente auf der gleichen Ebene sind, müssen wir Ihre Einrichtung sehen. – TheZ

Die verschachtelten Absatz-Tags können sich in diesem Setup nicht nur mit CSS gegenseitig auslösen. Das würde Javascript erfordern. – TheZ

Das Beste, was Sie rein CSS tun können, ist dies:

.classname:hover ~ .classname { 
    background-color: yellow; 
}

Aber diese hebt nur alle Geschwister mit einer Klasse hervor classnamenach th Das schwebende Element.

Sie müssen JavaScript verwenden, um alle Elemente hervorzuheben;

var elms = document.getElementsByClassName("classname"); 
var n = elms.length; 
function changeColor(color) { 
    for(var i = 0; i < n; i ++) { 
     elms[i].style.backgroundColor = color; 
    } 
} 
for(var i = 0; i < n; i ++) { 
    elms[i].onmouseover = function() { 
     changeColor("yellow"); 
    }; 
    elms[i].onmouseout = function() { 
     changeColor("white"); 
    }; 
}

Wenn Sie mehrere Klassen haben und dies verallgemeinern wollen, verwenden Sie so etwas wie dieses:

var classes = ["one", "two", "three"]; //list of your classes 
var elms = {}; 
var n = {}, nclasses = classes.length; 
function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this.className, "yellow"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this.className, "white"); 
     }; 
    } 
};

Quelle

2012-10-08 17:49:09 Chris

Stellen Sie sich vor, wie viel Leute in ihren Mündern schäumen werden, wenn der Themenwähler implementiert wird: '! .classname ~ .classname: hover,. Klassenname: Hover ~ .Classname' - nun, vielleicht nicht viel. – BoltClock

Es funktioniert nicht. Ich habe Ihren Code in ein Skript-Tag geschrieben: ' '. –

Muss ich CSS mit diesem Setup verwenden? –

Dank der Antwort von Chris. Ich benutzte seinen Code, um eine einfache Funktion zu schreiben, die den Job erledigt. Sie können die Funktion in der <head></head> platzieren, aber Sie müssen es aufrufen, wenn die Seite geladen wurde, d. H. Am Ende des Körpers platzieren. colorout ist der Hintergrund-Farbe

Die Funktion:

function hoverByClass(classname,colorover,colorout="transparent"){ 
    var elms=document.getElementsByClassName(classname); 
    for(var i=0;i<elms.length;i++){ 
     elms[i].onmouseover = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor="orange";//colorover; 
      } 
     }; 
     elms[i].onmouseout = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor=colorout; 
      } 
     }; 
    } 
}

und rufen Sie die Funktion wie folgt aus:

hoverByClass("un","yellow"); 
hoverByClass("un2","pink");

Ich weiß, die Frage ist alt, aber vielleicht helfen jemand anderes :)

Probieren sie es hier:

function hoverByClass(classname,colorover,colorout="transparent"){ 
 
\t var elms=document.getElementsByClassName(classname); 
 
\t for(var i=0;i<elms.length;i++){ 
 
\t \t elms[i].onmouseover = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorover; 
 
\t \t \t } 
 
\t \t }; 
 
\t \t elms[i].onmouseout = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorout; 
 
\t \t \t } 
 
\t \t }; 
 
\t } 
 
} 
 
hoverByClass("un","yellow"); 
 
hoverByClass("un2","pink");

<div class="book"> 
 
    <div class="page left"> 
 
    <p class="un">Karen…</p><p class="un2">Karen2…</p> 
 
    </div> 
 
    <div class="page right"> 
 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p><p class="un2">Karen2 ne se retourne pas. Mme Tilford2 reste là, apparemment confuse et abattue.</p> 
 
    </div> 
 
</div>

Quelle

2016-07-21 10:18:54 WuerfelDev

Hover auf Element und markieren Sie alle Elemente mit der gleichen Klasse

Antwort

Verwandte Themen