Pfandleiher: CSS Transition bei hovern eines anderen Elements

Beitrag lesen

SELF-Forum

CSS Transition bei hovern eines anderen Elements

Pfandleiher
– Informationen zu den Bewertungsregeln

omg. http://blog.selfhtml.org/2013/02/02/html5-serie-der-weg-zu-html5/

Ja, richtig... ich schwelge noch immer in Zeiten von HTML4. Danke fürs abholen in die Jetzt-Zeit ;-)

<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)  
  
Sehe ich ein. Irgendwie modern.  
  

> Wie ist denn der Startzustand der Seite? Neutral?  

Eine der beiden Farbschemas wird zu beginn aktiv sein. Welche ist Geschmackssache.  
  

> ~~~css

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.

Tolle Lösung! An die von dir verwendeten Tags html und body habe ich gar nicht gedacht!

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](http://molily.de/js/event-handling-grundlagen.html). für den Anfang könnte es der eventhandler onmouseover (und onmouseout, falls es eine neutrale Seitenansicht gibt) sein.  
  
Klappt wunderbar! Einzig die Geschichte mit den linear gradients geht so nicht. Aber ich habe getüftelt:  
  
~~~html
<html>  
	<head>  
		<title>Transition-Test</title>  
		<style type="text/css">  
			body { margin: 0;}  
			  
			#backgroundWrapper {  
				width: 100%;  
				height: 100%;  
				position: relative;  
			}  
			  
			#topic2background {  
				position: absolute;  
				  
				width: 100%;  
				height: 100%;  
				  
				background-image: -ms-linear-gradient(top left, red 0%, green 100%); /* IE10 Consumer Preview */  
				background-image: -moz-linear-gradient(top left, red 0%, green 100%); /* Mozilla Firefox */  
				background-image: -o-linear-gradient(top left, red 0%, green 100%); /* Opera */  
				background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, red), color-stop(1, green)); /* Webkit (Safari/Chrome 10) */  
				background-image: -webkit-linear-gradient(top left, red 0%, green 100%); /* Webkit (Chrome 11+) */  
				background-image: linear-gradient(to bottom right, red 0%, green 100%); /* W3C Markup, IE10 Release Preview */  
			}  
			  
			#topic1background {  
				position: absolute;  
				  
				width: 100%;  
				height: 100%;  
								  
				background-image: -ms-linear-gradient(top left, black 0%, white 100%); /* IE10 Consumer Preview */  
				background-image: -moz-linear-gradient(top left, black 0%, white 100%); /* Mozilla Firefox */  
				background-image: -o-linear-gradient(top left, black 0%, white 100%); /* Opera */  
				background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, black), color-stop(1, white)); /* Webkit (Safari/Chrome 10) */  
				background-image: -webkit-linear-gradient(top left, black 0%, white 100%); /* Webkit (Chrome 11+) */  
				background-image: linear-gradient(to bottom right, black 0%, white 100%); /* W3C Markup, IE10 Release Preview */  
				  
				opacity: 1;  
				  
				transition: all ease 1s;  
				-moz-transition: all ease 1s; /* Firefox */  
				-webkit-transition: all ease 1s; /* Safari and Chrome */  
				-o-transition: all ease 1s; /* Opera */  
			}  
  
			#topic1background.inactive { opacity:0; }  
			  
		</style>  
		  
		<script type="text/javascript">  
			function activateTopic1() {document.getElementById("topic1background").className="";}  
			function activateTopic2() {document.getElementById("topic1background").className="inactive";}  
		</script>  
	</head>  
  
	<body>  
		<div id="backgroundWrapper">  
			<div id="topic2background"></div>  
			<div id="topic1background"></div>  
		</div>  
		  
		<head></head>  
		<nav></nav>  
		<main><a class="topic1" href="..." onmouseover="activateTopic1()">Topic 1</a> oder <a class="topic2" href="..." onmouseover="activateTopic2()">Topic 2</a></main>  
		<footer></footer>  
	</body>  
</html>

Die beiden Hintergrund-DIVs liegen also übereinander, und das obere wird ausgeblendet.

Ich habe jetzt nur das Problem, dass ich den backgroundWrapper nicht hinter die nachfolgenden Elemente head nav main und footer platziert bekomme. Irgendwie will das nicht. Mein CSS ist soo unglaublich rostig.... Ich werde daran noch tüfteln müssen.

Danke aber schonmal für die Hilfe bis hier her!

Beitrag melden
–
Informationen zu den Bewertungsregeln