✔ Set Visible/Hidden

sebastianb

sebastianb

Erfahrenes Mitglied
Hallo zusammen,

ich bin in Sachen css völlig unerfahren und komme mit folgendem Problem nicht weiter.

Moment produziert mein css folgende Ausgabe:

css.png

Jeder einzelne Kommentar wird durch solch eine Struktur aufgebaut:

<div class="comment">
<div class="content">Hello World</div>
<div class="action_link">hidden_link</dv>
<div>

Nun will ich, dass der im Bild rot markierte Link nur sichtbar ist, wenn ich mit dem Mauszeiger über den äußeren Block (class="comment") gehe.
Ich weiß zwar wie man den Style eines divs auf hidden/visible setzt aber mir ist nicht ganz klar, wie ich das in diesem Fall dynamisch lösen kann.

Ich habe mir jedenfalls sowas vorgestellt:
this.action_link.style="visible"

Das einzige, was mir sonst einfallen würde ist für den hidden-block dynamisch eine id zu vergeben und dann diese ansprechen aber ich glaube da gibts n schöneren weg ;)

*Edit*
Ist es vll auch möglich den äußeren div stärker zu gewichten, bzw. das Überschreiben zu verhindern?

*Edit2*

ich bin gerade auf folgendes gestoßen, nur leider funktioniert das irgendwie nicht. Jemand ne Idee?

Code: 
.outer
		{
			visibility:visible !important;
		}

		.inner
		{
			visibility:hidden;
		}

<div class="outer">
		<div class="inner">
			I Am Invisible
		</div>
	</div>



Gruß Sebastian
 
Zuletzt bearbeitet:
SO ich machs nun einfach so:

HTML: 
<html>

	<head>
		
		<style>
		
			.inner
			{
				color:red;
				visibility:hidden;
			}
			
		</style>
				
		<script type="text/javascript">
		
		
			function setVisible(element)
			{
				var inv_id=element.id+"_links";

				document.getElementById(inv_id).style.visibility="visible";
				
			}
			
			function setInvisible(element)
			{
				var inv_id=element.id+"_links";
				document.getElementById(inv_id).style.visibility="hidden";
			}
			
		</script>	
	</head>
	
	<body>
		<div id="container_1" class="outer" onMouseOver="setVisible(this);" onMouseOut="setInvisible(this);">
			VISIBLE
			<div id="container_1_links" class="inner">
				INVISIBLE				
			</div>		
		</div>
		<div id="container_2" class="outer" onMouseOver="setVisible(this);" onMouseOut="setInvisible(this);">
			VISIBLE
			<div id="container_2_links" class="inner">
				INVISIBLE				
			</div>		
		</div>
	</body>
</html>

Gruß Sebastian
 
Hallo,

danke für deinen Tipp. Ich habe jetzt noch eine etwas schönere Lösung mit JQuery gefunden (=> Anhang) :)

Gruß Sebastian
 

Anhänge

  • css_solution.zip
    465 Bytes · Aufrufe: 11
Hey Super danke! ;)

Das ist natürlich die Optimallösung, die ich gesucht habe. Die Verwendung von JQuery wollte ich eigentlich auch vermeiden aber ich bin wie gesagt in Sachen CSS sehr unbedarft und habe leider keine passende Möglichkeit mit plain css gefunden :)

Gruß

Sebastian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück