nicht angemeldet
Matthias ApselOm nah hoo pez nyeetz, Pfandleiher!
Allen Überlegungen muss eine HTML-Struktur zugrunde liegen. Die solltest du zeigen. Sonst kommen hier Lösungsvorschläge, die du dann mit "geht in meinem Fall aber nicht, weil ..." beantworten musst.
Das sehe ich ein:
<div id="page">
<div id="background">
<div id="green">Green BG</div>
<div id="red">Red BG</div>
</div><div id="content">
<div id="col1">hierarchical menu</div>
<div id="col2">
<a href="redpage.htm">Red Topic</a>
<a href="greenpage.htm">Green Topic</a>
</div>
<div id="col3">extra content</div></div>
</div>
omg. <http://blog.selfhtml.org/2013/02/02/html5-serie-der-weg-zu-html5/>
~~~html
<html>
<body>
<nav>hierarchical menu</nav>
<header>Text mit verschiedenen Links, die zum grünen oder roten topic führen
<a class="topic1" href="...">mit</a> einer Klassenbezeichnung, in der rot oder
grün nicht <a class="topic2" href="...">vorkommen</a>
</header>
...
</body>
</html>
wäre deutlich besseres HTML. (siehe http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung zur Verwendung der Elemente)
Wie ist denn der Startzustand der Seite? Neutral?
html {background: red;}
body {background: green;
transition: all ease .1s;} /* [link:http://www.w3.org/TR/css3-transitions/#transition-timing-function@title=timing-functions] */
body.topic2 {background: transparent;}
opacity geht in diesem Beispiel nicht, weil dadurch das ganze Element durchsichtig wird und nicht nur der Hintergrund.
Folgendes JavaScript erledigt die Umschaltung:
function aendere() {
e = document.body;
if (e.className == "topic2") e.className=""; else e.className="topic2";
}
Wenn du magst, Eventhandling nach molily. für den Anfang könnte es der eventhandler onmouseover (und onmouseout, falls es eine neutrale Seitenansicht gibt) sein.
Matthias
1/z ist kein Blatt Papier.
