per css hintergrundfarbe ändern

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/per_css_hintergrundfarbe_aendern_118913/page_1 - zur Vollversion wechseln!

sick schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 20:18

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

Mirror schrieb am 07.07.2004 um 20:22

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

sick schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 21:24

@rektal: lies dir das ganze noch einmal durch

Rektal schrieb am 07.07.2004 um 21:25

shize ja
net mein tag :-D

orpheus schrieb am 07.07.2004 um 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 schrieb am 07.07.2004 um 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