Pfandleiher: CSS Transition bei hovern eines anderen Elements

SELF-Forum

CSS Transition bei hovern eines anderen Elements

Pfandleiher
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich habe eine Seite, die zwei Themenfelder abdeckt, was farblich hervorgehoben werden soll.
Die dominierenden Farbe von Thema Rot wird rot, Thema Grün wird grün. Alles sehr vereinfacht natürlich....

Auf der Startseite soll die auswahl des Themas Rot oder Thema Grün durch zwei Links erfolgen. Wenn nun der Link zu Thema A gehovert wird, soll sich die Hintergrundfarbe (ein linearer Farbverlauf des alles umgebenden DIV-Elemets nach CSS3-Möglichkeit) ändern, jedoch optisch geschmeidig durch eine transition. Ich weiß dass man keine linear-gradient-Eigenschaften mit einer transition verändern kann. Daher möchte ich zwei DIVs (einer ist rot, der andere grün) übereinander legen und den oberen (roten) über die opacity unsichtbar faden, wenn der Link zum Thema Grün gehovert wird.

Also zunächst so (Minimalbeispiel):

  
#green{  
	background: green;  
	opacity: 1;  
}  
#red{  
	background: red;  
	opacity: 1;  
	transition: opacity 1s ease-out, opacity 1s ease;  
}  
  
#red:hover {  
	opacity: 0;  
}

Was jetzt passiert ist schon ähnlich von dem was ich mit vorstelle. Wird #red gehovert, so wird es unsichtbar. Rot verschwindet, grün kommt zum Vorschein. (Der linear gradient und das rückwärts faden beim verlassen von #red fehlt hier drin natürlich...)

Jetzt meine ungelöste Herausforderung:
Wie kann ich es erreichen, dass #red unsichtbar wird, wenn ein anderes Element (der Link eben) gehovert wird? Brauche ich hier für JavaScript? Kann mir dazu einer Stichworte hinwerfen, mit denen ich einen Lösungsansatz finden kann? Ich habe nämlich nicht mal eine Ahnung wonach ich Google fragen soll...

Wäre toll wenn mir einen ein paar Anstöße geben kann.

Danke und Grüße
Pfandleiher

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Transition bei hovern eines anderen Elements

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om 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.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Transition bei hovern eines anderen Elements

      Pfandleiher
      – Informationen zu den Bewertungsregeln

      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>

      Ich dachte erst der CSS-Selektor ~ würde gehen, ala

      #red{  
    opacity: 1;  
}  
  
#green:hover ~ #red{  
    opacity: 0;  
}

      Aber das scheitert ja, da #red und der Link zu greenpage.htm nicht auf der gleichen Ebene liegen. Daher ist die Anforderung des HTMl total gerechtfertigt!

      Ich hoffe ich bin meiner Verpflichtung jetzt nachgekommen :-)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Transition bei hovern eines anderen Elements

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om 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.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 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

          1. CSS Transition bei hovern eines anderen Elements

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Om nah hoo pez nyeetz, Pfandleiher!

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

            Möglicherweise bist du dir der Unterschiede zwischen Tag und Element nicht bewusst.

            Klappt wunderbar! Einzig die Geschichte mit den linear gradients geht so nicht. Aber ich habe getüftelt:

            Ja, das ist gut möglich.

              <head></head>

            header, nicht head

            Du verfällst schon wieder in divitis. Einer der Hintergründe sollte das html oder body-Element bekommen. Da du nur zwei verschiedene Einstellungen hast, brauchst du _nur_  _eine_ Einstellung deaktivieren oder aktivieren. Du brauchst _maximal_ ein zusätzliches Element.

            Eigenschaften mit Präfix: Zuletzt immer die präfixfreie Eigenschaft notieren, damit die Browser, falls möglich, den Standard verwenden.

            Matthias

            --
            1/z ist kein Blatt Papier.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. CSS Transition bei hovern eines anderen Elements

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Om nah hoo pez nyeetz, Pfandleiher!

            Das wichtigste vergessen:

            Ich habe jetzt nur das Problem, dass ich den backgroundWrapper nicht hinter die nachfolgenden Elemente head nav main und footer platziert bekomme.

            z-index hilft.

            Matthias

            --
            1/z ist kein Blatt Papier.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln