Div 1 hover = div 2 verändert sich
0 
Take
0 0 Take
0 0 Take
0 0 0 
Gunnar Bittersmann
0 Take
Div 1 hover = div 2 verändert sich
Hallo,
ich habe folgenden Link gefunden: http://www.tutorials.de/css/281768-div-1-hover-div-2-veraendert-sich.html
Und habe versucht dies genauso zu bauen:
HTML:(CSS ist im head natürlich eingebunden)
<body>
<div id="page">
<div>
<div>
</div>
</div>
<div class="item" id="item_1">
</div>
<div class="goto_invis" id="go_invis_1">
</div>
<div class="goto_vis" id="go_vis_1">
</div>
</div>
</body>
CSS:
body {
background-color: #FFFFFF;
}
#page {
position: absolute;
left: 50%;
margin-left: -450px;
width: 900px;
top: 10px;
}
#go_vis_1 {
position: absolute;
left: 200px;
height: 200px;
width: 400px;
}
#go_invis_1 {
position: absolute;
left: 200px;
height: 200px;
width: 400px;
visibility: hidden;
}
#item_1 {
position: relative;
left: 10px;
top: 10px;
}
#item_1:hover #goto_invis_1,
#item_1:hover + #goto_invis_1 {
visibility: visible;
}
.goto_vis {
background-color: #0F0;
}
.goto_invis {
background-color: #00F;
visibility: hidden;
}
.item {
width: 120px;
height: 40px;
background-color: #F00;
}
.item:hover {
background-color: #FF0;
}
/*.item:hover .goto_invis,
.item:hover + .goto_invis {
visibility: visible;
}*/
Kann mir jemand helfen, wieso dies nicht geht?
Dass das mit dem DIV-hover bie IE6 nicht geht ist mir bekannt.
Danke schonmal.
-
Moin,
#item_1:hover #goto_invis_1,
#item_1:hover + #goto_invis_1 {
visibility: visible;
}Tippfehler: deine ID war #go_invis_1. :)
Gruß,
Take-
Moin,
#item_1:hover #goto_invis_1,
#item_1:hover + #goto_invis_1 {
visibility: visible;
}Tippfehler: deine ID war #go_invis_1. :)
Gruß,
TakeWenn ich anstelle der kommas einen Punkt mache, ändert dies nichts.
Ich denke meine ID in html mit der ID in CSS stimmt überein...
Oder liegt das Problem an der class und der ID?
Oder verstehe ich nicht ganz wo du den Tippfehler siehst?Gruß,
TheBoldPS: Ziel ist es, dass durch das hover auf menu_1 sich das invis über das vis legt.
-
Moin,
Wenn ich anstelle der kommas einen Punkt mache, ändert dies nichts.
Ich denke meine ID in html mit der ID in CSS stimmt überein...Nee, eben nicht. Im CSS steht
#item_1:hover #goto_invis_1, ^^^^^^^^^^^^ #item_1:hover + #goto_invis_1 ^^^^^^^^^^^^im HTML aber
<div class="goto_invis" id="go_invis_1"> ^^^^^^^^^^ </div>Oder verstehe ich nicht ganz wo du den Tippfehler siehst?
Scheint so. :)
Gruß,
Take-
Moin,
Wenn ich anstelle der kommas einen Punkt mache, ändert dies nichts.
Ich denke meine ID in html mit der ID in CSS stimmt überein...Nee, eben nicht. Im CSS steht
#item_1:hover #goto_invis_1,
^^^^^^^^^^^^
#item_1:hover + #goto_invis_1
^^^^^^^^^^^^> > im HTML aber > ~~~html > <div class="goto_invis" id="go_invis_1"> > ^^^^^^^^^^ > </div> >Oder verstehe ich nicht ganz wo du den Tippfehler siehst?
Scheint so. :)
Gruß,
Take#item_1:hover #goto_invis_1 #item_1:hover + #goto_invis_1 { visibility: visible; }So geht es aber auch nicht.
Kannst du mir bitte den richtigen Code hier reinkopieren? Anscheinen stehe ich auf einen dicken Schlauch ;)-
Moin,
#item_1:hover #goto_invis_1
#item_1:hover + #goto_invis_1 {
visibility: visible;
}> So geht es aber auch nicht. > Kannst du mir bitte den richtigen Code hier reinkopieren? Anscheinen stehe ich auf einen dicken Schlauch ;) Bitte: ~~~css #item_1:hover #go_invis_1, #item_1:hover + #go_invis_1 { visibility: visible; }Müsste stimmen.
Gruß,
Take-
Danke für die späte Hilfe.
Allerdings geht das damit auch nicht. Das blaue Feld wird nicht angezeigt...
Obwohl alles genauso ist wie in dem Tutorial, welches ich verlinkt habe.
Ich sehe allerdings auch keine Unterschied von deiner jetzigen Lösung zu#item_1:hover #goto_invis_1, #item_1:hover + #goto_invis_1 { visibility: visible; }Noch eine Idee?
-
@@TheBold:
nuqneH
Ich sehe allerdings auch keine Unterschied von deiner jetzigen Lösung zu
#item_1:hover #goto_invis_1,
#item_1:hover + #goto_invis_1
[…]
Noch eine Idee?Ja: Brille putzen!!
#go_invis_1 vs. #goto_invis_1
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Es geht wohl doch, aber nur ohne das "go_vis_1" komisch...
dann muss ich wohl versuchen bei dem hover die farbedas hintergrundbild zu ändern... -
@@Take:
nuqneH
#item_1:hover #go_invis_1, #item_1:hover + #go_invis_1 {
visibility: visible;
}Wozu '
#item_1:hover #go_invis_1' gut sein soll, entgeht meinem Verständnis.Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Moin,
Wozu '
#item_1:hover #go_invis_1' gut sein soll, entgeht meinem Verständnis.Meinem auch, dachte aber, er hätte sich da schon was bei gedacht. :))
Gruß,
Take
-
-
-
-
-
-