Archief - css: mouseover met verschillende kleuren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

DeFlup

Legacy Member
zit dus met de volgende situatie

<tr class="color1">
<td class="color2">&nbsp;</td>
<td class="color3">&nbsp;</td>
</tr>

nu wil 'k een mouseover maken zodanig dat de eerste cel in een bepaalde kleur staat en de 2de in een andere kleur.

.color1 {
background-color: #D4D5D5;
}

.color2 {
background-color: #CBCBCB;
}

.color3 {
background-color: #AFAFAF;
}

zo staat het nu, is het soms mogelijk dat als de style van de rij een bepaalde stijl is, dat de bgcolor van color1 bijv #D4D5D5 en van color2 #CBCBCB is, en als de stijl van de rij verandert wordt de bgcolor bijv #FFFFF en #000000?
zonder 2 stylesheets te gebruiken.

ik hoop dat het een beetje duidelijk is?
L

Lashknife

Legacy Member
css inheritance:
Code: 
tr.color1 td.color2 {
	background-color: #cbcbcb;
}
tr.color1 td.color3 {
	background-color: #afafaf;
}
tr.color1b td.color2 {
	background-color: white;
}
tr.color1b td.color3 {
	background-color: black;
}

je kan met een script van class wijzigen waardoor relevant de juiste inheritance wordt doorgegeven, voorbeeld:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Lashknife" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title></title>
<script type="text/javascript">
<!--
function chgBg(obj) {
	obj.className = (obj.className == "color1"?"color1b":"color1");
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin: 0px;
}
form {
	margin: 0px;
}
img {
	border-style: none;
}
tr.color1 td.color2 {
	background-color: #cbcbcb;
}
tr.color1 td.color3 {
	background-color: #afafaf;
}
tr.color1b td.color2 {
	background-color: yellow;
}
tr.color1b td.color3 {
	background-color: black;
}
//-->
</style>
</head>

<body>
<div><table style="width:200px">
<tr class="color1" onmouseover="chgBg(this)" onmouseout="chgBg(this)">
<td class="color2">test</td>
<td class="color3">test</td>
</tr>
<tr class="color1" onmouseover="chgBg(this)" onmouseout="chgBg(this)">
<td class="color2">test</td>
<td class="color3">test</td>
</tr>
<tr class="color1" onmouseover="chgBg(this)" onmouseout="chgBg(this)">
<td class="color2">test</td>
<td class="color3">test</td>
</tr>
</table></div>
<!--
<div><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a></div>
-->
</body>
</html>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan