per css hintergrundfarbe ändern

sick

I'm Rick James, bitch!

Registered: Oct 2000
Location: Linz
Posts: 523

07.07.2004 - 19:05

hi.

ist es möglich per css die hintergrundfarbe eines div-containers für jeden darin enthaltenen link bei :hover zu ändern?

sprich: 2 div's nebeneinander. im linken stehen links drinnen, und beim mouseover wird die hintergrundfarbe des linken divs geändert.
für jeden link eine andere farbe...

ist das möglich?

---
schnell mal nur ca. so zusammengebastelt...

Code: PHP

<style type="text/css">
<!--
#fullbox {
	height: 350px; width: 500px; border: 1px dotted #666666;
}
#lbox {
	background-color: #CC9933; width: 50%; float: left;
}
#rbox {
	background-color: #CC0000; width: 49%; float: right;
}
.link1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000099;
}
#lbox.link1:hover {
	background-color: #EBEBEB;
-->
</style>
</head>

<body>
<div id="fullbox">
<div id="lbox">
<a href="http://www.test.at" target="_blank" class="link1">Link 1</a><br />
<a href="http://www.orf.at" target="_blank">Link 2</a><br />
<a href="http://fm4.orf.at" target="_blank">Link 3</a><br />

</div><!-- lbox -->

<div id="rbox">
 Blabla
</div><!-- rbox -->
</div><!-- fullbox -->
</body>
</html>

dio

Here to stay

Registered: Nov 2002
Location: Graz
Posts: 4884

07.07.2004 - 20:18

ich kann mir ned vorstelln, dass des nur mit css zu verwirklichen is, mit jscript gehts auf alle fälle.

Mirror

Hakke-Core

Registered: Aug 2001
Location: viennaaaaa
Posts: 1889

07.07.2004 - 20:22

mußt jeden link als div setzen und im css extra definiern.muß ma aber aufpassen das ma ned durcheinander kommt.

sick

I'm Rick James, bitch!

Registered: Oct 2000
Location: Linz
Posts: 523

07.07.2004 - 20:28

Zitat von Mirror
mußt jeden link als div setzen und im css extra definiern.muß ma aber aufpassen das ma ned durcheinander kommt.

sind ja dann überlappend, sonst ist nur die box rundum den text eingefärbt, oder?
da muss ich ja dann auch noch die reihenfolge (z-index) ändern?

orpheus

in a nutshell

Registered: Mar 2002
Location: Klagenfurt
Posts: 533

07.07.2004 - 20:30

Zitat von diokletian
ich kann mir ned vorstelln, dass des nur mit css zu verwirklichen is, mit jscript gehts auf alle fälle.

full ack. wär mir neu das man mit hover auf übergeordnete elemente zugreifen kann. probiers as dio said mit js würd ca so ausschaun...

Code:

window.getElementbyId('lbox').style.background = dieNeueFarbe;

sick

I'm Rick James, bitch!

Registered: Oct 2000
Location: Linz
Posts: 523

07.07.2004 - 20:32

Zitat von orpheus
full ack. wär mir neu das man mit hover auf übergeordnete elemente zugreifen kann. probiers as dio said mit js würd ca so ausschaun...
Code:
window.getElementbyId('lbox').style.background = dieNeueFarbe;

hmm, thx.

will aber -wenn möglich- kein js verwenden.
aber wenns nicht anders geht...

Mirror

Hakke-Core

Registered: Aug 2001
Location: viennaaaaa
Posts: 1889

07.07.2004 - 20:39

also wenn du das meinst was ich meine dann gehts mit css.
geh mal auf http://www.stelzhammerpiano.at/ meinst du solchen farbwechsel wie im menü?

sick

I'm Rick James, bitch!

Registered: Oct 2000
Location: Linz
Posts: 523

07.07.2004 - 20:58

Zitat von Mirror
also wenn du das meinst was ich meine dann gehts mit css.
geh mal auf http://www.stelzhammerpiano.at/ meinst du solchen farbwechsel wie im menü?

jo, so ähnlich. bloss dass sich der wechsel immer im selben div abspielen würde, was ja bei deinem link nicht is...

Mirror

Hakke-Core

Registered: Aug 2001
Location: viennaaaaa
Posts: 1889

07.07.2004 - 21:04

ok..dann hab ich dei frag a bissl falsch verstanden.bin mir aber ziehmlich sicher das es auch mit css geht,nur mußma ebn aufpassen was überlappungen angeht.

orpheus

in a nutshell

Registered: Mar 2002
Location: Klagenfurt
Posts: 533

07.07.2004 - 21:21

lt.Cascading Style Sheets, level 2 CSS2 Specification; Chapter: 5.10 Pseudo-elements and pseudo-classes, wirken sich pseudo classes á la :active, :hover, :focus nur auf den selector aus. d.h. .link1:hover funzt während .link1:hover #lbox ned funzt, #lbox.link1:hover wie oben wirkt sich nur auf den "link1" selector aus der innerhalb eines id selectors mit dem namen #lbox liegt..

fazit: ohne js wird da imho nix laufen - allerdings wart bis da rektal den thread liest und dir wird geholfen werden

hth

add stelzhammer:
source

Code:

#aktuell { 
 width: 54px;
}
#aktuell:hover{
 background-image:url(../img/menue/menue_aktuell_hover.jpg);
}

Code:

<a href="aktuell.php" id="aktuell">Aktuell</a>

da wirkt sich :hover nur aufs bgimage aus vom anchor aus..

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

07.07.2004 - 21:23

Hallo, wo sind bitte die CSS leute?!?!

)
CSS

Code:

.klasse-des-div a.link1:hover {
  background-color: red;
}
.klasse-des-div a.link2:hover {
  background-color: red;
}
.klasse-des-div a.link3:hover {
  background-color: red;
}

HTML

Code:

<div class="klasse-des-div">
  <a class="link1">Link 1 Text</a>
  <a class="link2">Link 2 Text</a>
  <a class="link3">Link 3 Text</a>
</div>

Tex

got r00t?

Registered: Aug 2000
Location: salzburg
Posts: 1844

07.07.2004 - 21:24

@rektal: lies dir das ganze noch einmal durch

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

07.07.2004 - 21:25

shize ja

net mein tag :-D

orpheus

in a nutshell

Registered: Mar 2002
Location: Klagenfurt
Posts: 533

07.07.2004 - 21:27

Zitat von Rektal
shize ja
net mein tag :-D

Du glaubst ned wies mich jetzt grad vom Hocker gschmissn hat... shit happens

bleibst allerdings trotzdem unser zeldman prophet

Mirror

Hakke-Core

Registered: Aug 2001
Location: viennaaaaa
Posts: 1889

07.07.2004 - 23:08

Zitat von orpheus
Du glaubst ned wies mich jetzt grad vom Hocker gschmissn hat... shit happens bleibst allerdings trotzdem unser zeldman prophet

wie meinst des jetzt?
ok entweder hab ich heut nen sauschlechten css tag und hab auch kein bock nachzusehn,aber was rektal gepostet hat, hat nicht den anschein als ob da die lösu g wäre,da i mir diese als erstes gedacht hab,hab die frage von threat-ersteller nciht 100% verstanden

sick I'm Rick James, bitch! Registered: Oct 2000 Location: Linz Posts: 523	07.07.2004 - 19:05 hi. ist es möglich per css die hintergrundfarbe eines div-containers für jeden darin enthaltenen link bei :hover zu ändern? sprich: 2 div's nebeneinander. im linken stehen links drinnen, und beim mouseover wird die hintergrundfarbe des linken divs geändert. für jeden link eine andere farbe... ist das möglich? --- schnell mal nur ca. so zusammengebastelt... Code: PHP <style type="text/css"> <!-- #fullbox { height: 350px; width: 500px; border: 1px dotted #666666; } #lbox { background-color: #CC9933; width: 50%; float: left; } #rbox { background-color: #CC0000; width: 49%; float: right; } .link1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000099; } #lbox.link1:hover { background-color: #EBEBEB; --> </style> </head> <body> <div id="fullbox"> <div id="lbox"> <a href="http://www.test.at" target="_blank" class="link1">Link 1</a><br /> <a href="http://www.orf.at" target="_blank">Link 2</a><br /> <a href="http://fm4.orf.at" target="_blank">Link 3</a><br /> </div><!-- lbox --> <div id="rbox"> Blabla </div><!-- rbox --> </div><!-- fullbox --> </body> </html>
dio Here to stay Registered: Nov 2002 Location: Graz Posts: 4884	07.07.2004 - 20:18 ich kann mir ned vorstelln, dass des nur mit css zu verwirklichen is, mit jscript gehts auf alle fälle.
Mirror Hakke-Core Registered: Aug 2001 Location: viennaaaaa Posts: 1889	07.07.2004 - 20:22 mußt jeden link als div setzen und im css extra definiern.muß ma aber aufpassen das ma ned durcheinander kommt.
sick I'm Rick James, bitch! Registered: Oct 2000 Location: Linz Posts: 523	07.07.2004 - 20:28 Zitat von Mirror mußt jeden link als div setzen und im css extra definiern.muß ma aber aufpassen das ma ned durcheinander kommt. sind ja dann überlappend, sonst ist nur die box rundum den text eingefärbt, oder? da muss ich ja dann auch noch die reihenfolge (z-index) ändern?
orpheus in a nutshell Registered: Mar 2002 Location: Klagenfurt Posts: 533	07.07.2004 - 20:30 Zitat von diokletian ich kann mir ned vorstelln, dass des nur mit css zu verwirklichen is, mit jscript gehts auf alle fälle. full ack. wär mir neu das man mit hover auf übergeordnete elemente zugreifen kann. probiers as dio said mit js würd ca so ausschaun... Code: `window.getElementbyId('lbox').style.background = dieNeueFarbe;`
sick I'm Rick James, bitch! Registered: Oct 2000 Location: Linz Posts: 523	07.07.2004 - 20:32 Zitat von orpheus full ack. wär mir neu das man mit hover auf übergeordnete elemente zugreifen kann. probiers as dio said mit js würd ca so ausschaun... Code: `window.getElementbyId('lbox').style.background = dieNeueFarbe;` hmm, thx. will aber -wenn möglich- kein js verwenden. aber wenns nicht anders geht...
Mirror Hakke-Core Registered: Aug 2001 Location: viennaaaaa Posts: 1889	07.07.2004 - 20:39 also wenn du das meinst was ich meine dann gehts mit css. geh mal auf http://www.stelzhammerpiano.at/ meinst du solchen farbwechsel wie im menü?
sick I'm Rick James, bitch! Registered: Oct 2000 Location: Linz Posts: 523	07.07.2004 - 20:58 Zitat von Mirror also wenn du das meinst was ich meine dann gehts mit css. geh mal auf http://www.stelzhammerpiano.at/ meinst du solchen farbwechsel wie im menü? jo, so ähnlich. bloss dass sich der wechsel immer im selben div abspielen würde, was ja bei deinem link nicht is...
Mirror Hakke-Core Registered: Aug 2001 Location: viennaaaaa Posts: 1889	07.07.2004 - 21:04 ok..dann hab ich dei frag a bissl falsch verstanden.bin mir aber ziehmlich sicher das es auch mit css geht,nur mußma ebn aufpassen was überlappungen angeht.
orpheus in a nutshell Registered: Mar 2002 Location: Klagenfurt Posts: 533	07.07.2004 - 21:21 lt.Cascading Style Sheets, level 2 CSS2 Specification; Chapter: 5.10 Pseudo-elements and pseudo-classes, wirken sich pseudo classes á la :active, :hover, :focus nur auf den selector aus. d.h. .link1:hover funzt während .link1:hover #lbox ned funzt, #lbox.link1:hover wie oben wirkt sich nur auf den "link1" selector aus der innerhalb eines id selectors mit dem namen #lbox liegt.. fazit: ohne js wird da imho nix laufen - allerdings wart bis da rektal den thread liest und dir wird geholfen werden hth add stelzhammer: source Code: `#aktuell { width: 54px; } #aktuell:hover{ background-image:url(../img/menue/menue_aktuell_hover.jpg); }` Code: `<a href="aktuell.php" id="aktuell">Aktuell</a>` da wirkt sich :hover nur aufs bgimage aus vom anchor aus..
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	07.07.2004 - 21:23 Hallo, wo sind bitte die CSS leute?!?! ) CSS Code: `.klasse-des-div a.link1:hover { background-color: red; } .klasse-des-div a.link2:hover { background-color: red; } .klasse-des-div a.link3:hover { background-color: red; }` HTML Code: `<div class="klasse-des-div"> <a class="link1">Link 1 Text</a> <a class="link2">Link 2 Text</a> <a class="link3">Link 3 Text</a> </div>`
Tex got r00t? Registered: Aug 2000 Location: salzburg Posts: 1844	07.07.2004 - 21:24 @rektal: lies dir das ganze noch einmal durch
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	07.07.2004 - 21:25 shize ja net mein tag :-D
orpheus in a nutshell Registered: Mar 2002 Location: Klagenfurt Posts: 533	07.07.2004 - 21:27 Zitat von Rektal shize ja net mein tag :-D Du glaubst ned wies mich jetzt grad vom Hocker gschmissn hat... shit happens bleibst allerdings trotzdem unser zeldman prophet
Mirror Hakke-Core Registered: Aug 2001 Location: viennaaaaa Posts: 1889	07.07.2004 - 23:08 Zitat von orpheus Du glaubst ned wies mich jetzt grad vom Hocker gschmissn hat... shit happens bleibst allerdings trotzdem unser zeldman prophet wie meinst des jetzt? ok entweder hab ich heut nen sauschlechten css tag und hab auch kein bock nachzusehn,aber was rektal gepostet hat, hat nicht den anschein als ob da die lösu g wäre,da i mir diese als erstes gedacht hab,hab die frage von threat-ersteller nciht 100% verstanden

per css hintergrundfarbe ändern

Forum Index > Software > Coding Stuff

sick

dio

Mirror

sick

orpheus

sick

Mirror

sick

Mirror

orpheus

Rektal

Tex

Rektal

orpheus

Mirror