hover über mehrere Divs...

Internetdepp

Grünschnabel
Hallo ich bin neu hier...und ich fang an mich mit CSS zu beschäftigen...
nun ich habe folgende Situation mit der ich nicht weiter komme:
HTML:
<!DOCTYPE html>
<html>
<head>
....
<!-- miniMenü links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
  //FMENU
  	$(document).scroll(function(){
    if($(this).scrollTop() > 200)
    {   
        $('#mmenu').css({"left":"0px"});
    }
    else
    {   
        $('#mmenu').css({"left":"-150px"});
    }
});
</script>
</head>
<body>
<!-- ................................. M I N I  M E N U ................................. -->
<div id="mmenu">
	<div id="balken">
		<p class="test">TEEEEEEST</p>
	</div>
</div>
</body>
</html>
...
hierzu gehören folgende Klassen:
Code:
mmenu{
	position: fixed;
	top: 0px;
	z-index: 910;
	transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out; /* Firefox 4 */
	-webkit-transition: all 0.9s ease-in-out; /* Safari and Chrome */
	-o-transition: all 0.9s ease-in-out; /* Opera */
}
#balken { width: 30px; height: 400px;  background-color : #00c09e ;  z-index: 920; position: absolute; 
	border-bottom-left-radius: 0px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
	
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out; /* Firefox 4 */
	-webkit-transition: all 0.4s ease-in-out; /* Safari and Chrome */
	-o-transition: all 0.4s ease-in-out; /* Opera */
}
#balken:hover  .test{
	background-color: red ; cursor: pointer;
}

.test {font-size: 34px; left: -150px; position: absolute; color:blue;}
.test{left: 50px; }

das mit dem Einblenden von #balken und so funktioniert wunderbar... nur wird der p-tag "TEEEEEEST" auch sofort mit eingeblendet... eigentlich will ich, dass dieser Teil nach dem hover über #balken erstangezeigt wird.... hab aber kein Plan wie das zu bewerkstelligen ist...
 

Neue Beiträge

Zurück