gewisse Tags ansprechen

P

peter333

Erfahrenes Mitglied
Hallo zusammen,

ich habe mal eine Frage. Angenommen ich habe eine tabelle (id=tab_1). In dieser Tabelle ist ein Schritfzug:
HTML: 
<table id="tab_1">
<tr>
<td>
<p>Schritft_1</p>
</td>
<tr>
</table>

unter der tabelle habe ich eine weitere Tabelle gleichen Typs

HTML: 
<table id="tab_2">
<tr>
<td>
<p>Schritft_2</p>
</td>
<tr>
</table>

Ist es möglich Eigenschaften von Schrift_2 zu ändern währen man mit der Mouse über Schrift_1 fährt (hover)?
Z.B. soll sich die Farbe von Schrift_2 ändern wenn man mit der Mouse über Schrift_1 fährt.

LG
 
Moin,

hier fehlt das style-Objekt zur backgroundColor-Eigenschaft ;)

Code: 
document.getElementById('div2').style.backgroundColor = 'red'"


mfg Maik
 
Wer hat das denn verschoben? Ich wollte wissen, ib das mit CSS geht. Das es mit Javascript geht, weiß ich selbst. Bitte wieder zurück schieben.

An die anderen. Danke schonmal für eure Antworten.
 
Ich hab das Thema hierher verschoben, da dein Vorhaben in der von dir vorgestellten Markup-Struktur mit CSS nicht lösbar ist. Ansonsten darfst du davon ausgehen, dass ich dir was dazu gepostet hätte.

mfg Maik
 
Maik hat gesagt.:
Ich hab das Thema hierher verschoben, da dein Vorhaben in der von dir vorgestellten Markup-Struktur mit CSS nicht lösbar ist. Ansonsten darfst du davon ausgehen, dass ich dir was dazu gepostet hätte.

mfg Maik
Zum Vergrößern anklicken....

OK, sorry. Beim nächsten mal, werd ich mich genauer ausdrücken. Warum geht das denn nicht? Es gibt doch auch diese Klappmenüs, wo man über ein Element mit der Maus drüber fährt und dann ein anderer Bereich angezeigt wird und das komlplett ohne JavaScript.
 
In diesen "Klappmenüs" existiert aber eine ganz andere Markup-Struktur mit verschachtelten Elementen, die sich dann über den Selektor für Nachfahren oder Kind-Selektor steuern lassen. Eine weitere Möglichkeit wären hier "unmittelbar" benachbarte Elemente.

Hier mal ein grundlegendes Beispiel zur Verdeutlichung, in welchen "Struktur-Konstellationen" das mit CSS möglich ist:

HTML: 
<!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">
<meta name="date" content="2009-02-21">

<title>tutorials.de | demo_peter333</title>

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

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

/* Kind-Selektor */
div.parentBox > div#childBox {
padding:10px;
background:#e8e8e8;
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:#e8e8e8;
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 #000;
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>


mfg Maik
 
WOW. Danke für die Mühe. Mit den Selectoren fällt es mir ab und zu noch schwer. Aber damit kann ich auf jeden Fall schonmal weiter arbeiten. Denke, dass ich mein Ziel auch damit umsetzen kann.
Also nochmal ein großes Danke für die Mühe.

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück