• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Mit CSS Class eine andere Class ansprechen

C

carieleido

New member
Mit CSS Class eine andere Class ansprechen, also ändern, ohne JavaScript, wobei die zu ändernde Klasse nicht in der zu hovernden Klasse liegt, geht eigentlich nur mit JavaScript, heißt es oft im Netz. Deshalb habe ich eine CSS-Lösung geschrieben, einen so genannten Workaround.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Mit CSS Hover andere Elemente ändern ohne JavaScript</title>
<style type="text/css">
.blau, .rot, .hover{
background-color:#dddddd;
border-color:#000000;
border-style:dotted;
border-width:1px;
padding:5px 10px 5px 10px;
position:absolute;
}
.blau{
left:100px;
top:100px;
}
.rot{
left:200px;
top:-50px;
}
.ebene1{
cursor:default;
height:0px;
left:100px;
position:absolute;
top:100px;
width:0px;
}
.ebene1:hover .blau{
background-color:#66ccff;
border-style:solid;
}
.ebene1:hover .rot{
background-color:#ff6666;
border-style:solid;
}
.ebene2:hover .blau{
background-color:#dddddd;
border-style:dotted;
}
.ebene2:hover .rot{
background-color:#dddddd;
border-style:dotted;
}
</style>
</head><body>
<div class="ebene1">
<div class="hover">Hover</div>
<div class="ebene2">
<div class="blau">Blau</div>
<div class="rot">Rot</div>
</div>
</div>
</body>
</html>
 
Hab es jetzt erst angesehen, da ich mit CSS ein wenig auf Kriegsfuß stehe (sprich klappt nie so wie ich möchte). Aber klasse Idee !
Möchte zur 'Übung' den Versuch einer Erklärung abgeben.
Das ganze wird durchsichtiger, wenn man die div's ein wenig einrückt:
PHP: 
<div class="ebene1">
  <div class="hover">Hover</div>
  <div class="ebene2">
     <div class="blau">Blau</div>
     <div class="rot">Rot</div>
  </div>
</div>

Jetzt wird deutlich, daß Hover, Blau und Rot alle unterhalb der ebene1 liegen. Hier zieht erstmal die CSS-Definition für die ebene1. Blau und Rot liegen zudem noch unter der ebene2, dessen hover die der ebene1 gewissermaßen überschreibt und die Elemente grau macht. Die Reihenfolge der Vereinbarungen ist entscheidend, man kann ja mal versuchsweise die .ebene2:hover vor die der ebene1 setzen oder entfernen, dann wird deutlich wie carieleido's Idee funktioniert.
 
Dieser Thread verdient eine Aktualisierung, da seit einiger Zeit neue Möglichkeiten mit CSS3 zur Verfügung stehen, welche obige Aufgabe stark vereinfachen.
Dazu zählt der Following-sibling combinator (~), der zu den Geschwisterselectoren zählt.

HTML: 
 <div >
    <div class="trigger">
      <h3>here mouse over</h3>
    </div>

    <p>Ein Absatz</p>

    <div>div 1 </div>

    <div class="show">div 2 show</div>

    <div>div 3</div>

    <div class="show">div 4 show</div>
 </div>
 <div class="show">div 5 (other level)</div>

Per CSS möchte ich hier nun erreichen, das wenn die Maus über "here mouse over" schwebt alle folgenden divs mit der Klasse "show" einen grünen Hintergrund erhalten.

CSS:
Code: 
/* 
  Bei Mousover des Elementes div mit der Klasse trigger
  erhalten alle nachfolgenden div's der gleichen Ebene
  mit der Klasse show die Hintergrundfarbe grün
*/    
div.trigger:hover ~ div.show{background-color:green;}

Ein jsfiddle zum probieren.

LG jspit
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben