hover in abhängigkeit von..

Status
Nicht offen für weitere Antworten.
T

TraphiX

Erfahrenes Mitglied
Hi,

Gibt es dir Möglichkeit, dass wenn ich die Maus über ein Element bewege, dass dann ein anderes Element die hoverfunktion ausübt?

vielen Dank
 
Hi,

die Browserunterstützung der drei nachfolgend genannten Arten von CSS-Selektoren, sowie der allgemeinen :hover-Pseudoklasse vorausgesetzt, besteht diese Möglichkeit in CSS beim


Hier ein kleines praktisches Beispiel zur Veranschaulichung der drei genannten Möglichkeiten:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_TraphiX</title>

<style type="text/css">
div.parentBox {
padding:10px;
background:#fbfbfb;
color:#555;
}

/* Nachfahren-Selektor */
div.parentBox div#descendantBox {
padding:10px;
background:#eee;
color:#2f2f2f;
}
div.parentBox:hover div#descendantBox {
background:#234069;
color:#fff;
}


/* Kind-Selektor */
div.parentBox > div#childBox {
padding:10px;
background:#eee;
color:#2f2f2f;
}
div.parentBox:hover > div#childBox {
background:#234069;
color:#fff;
}


/* Nachbar-Selektor */
div#adjacentBox_1{
float:left;
padding:10px;
background:#f5f5f5;
color:#555;
}
div#adjacentBox_2 {
float:left;
margin-left:5px;
padding:10px;
background:#eee;
color:#2f2f2f;
}
div#adjacentBox_1:hover + div#adjacentBox_2 {
background:#234069;
color:#fff;
}


/* Allg. CSS-Einstellungen */
li {
margin-top:20px;
font-weight:bold;
}
div {
margin-top:10px;
border:1px solid #cfcfcf;
font-weight:normal;
}
</style>

</head>
<body>

<ul>
    <li>Nachfahren-Selektor:
        <div class="parentBox">
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <div id="descendantBox">descendantBox</div>
        </div>
    </li>
    <li>Kind-Selektor:
        <div class="parentBox">
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <p>some dummy text to expand the parentBox</p>
             <div id="childBox">childBox</div>
        </div>
    </li>
    <li>Nachbar-Selektor:
        <div id="adjacentBox_1">
             <p>some dummy text to expand the adjacentBox_1</p>
             <p>some dummy text to expand the adjacentBox_1</p>
             <p>some dummy text to expand the adjacentBox_1</p>
        </div>
        <div id="adjacentBox_2">
             <p>some dummy text to expand the adjacentBox_2</p>
             <p>some dummy text to expand the adjacentBox_2</p>
             <p>some dummy text to expand the adjacentBox_2</p>
        </div>
    </li>
</ul>

</body>
</html>
Alle übrigen Elementkonstellationen, die nicht unter diese drei Schemata fallen, müssen mit JavaScript und beispielsweise der getElementById()-Methode umgesetzt werden.

mfg Maik
 
Hallo
Ich ratte dir aber von den Kind-Selektor ap
da er im IE4-IE5-IE6 und im NN4 nicht unterstützt wird
wen alle LINUX oder MAC benutzten dan noch den veraalteten IE5 dan gehts und im Opera wird´s ap der Version 05 unterstüzt nur is es momentan noch so das man ap der IE5 Version aufbaut in 5 jahren wird´s vieleicht mal die 6er oder 7er reihe sein aber solange must du dich mit genügen was aktuel is oder wie Maik schon sagt es mit JavaScript machen is aber auch streßig wen du viele Leute ansprechen willst muste es noch ne normale funktion im <noscript> tag unterbringen aber du machst das schon glaub an dich :)

lg:Jooohny
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück