Mouseover Pfeileffekt

[Mario097]

Hallo


ich habe habe auf meiner Site ein Menubalken wo alle meine MenuDivs drinnen sind (4) ich will das wenn ich bei mouseover in das ganze div direkt darunter auf dem border-bottom von meinem ganzen header ein pfeil mit der mousetaste mitgeht der aber auf dem Border "klebt" und wenn man da mit der mouse drinnen ist möchte ich den Border von einem anderen div ändern halt die Farbe

danke ;D

 

[tombe]

Wenn du dich schon nicht an die Groß- und Kleinschreibung hältst, könntest du dann vielleicht mal ab und zu einen Punkt machen und einen neuen Satz beginnen.

Außerdem verstehe zumindest ich kein Wort von dem was du da schreibst.

 

[Mario097]

Ist kompliziert, bei hover soll ein Pfeil am Border-Bottom auftauchen der mit der Maus mitgeht.

 

[tombe]

Dann wirst du es wohl eher mit Javascript oder besser noch jQuery als rein mit CSS lösen müssen.

Vom Prinzip müsste es dann so sein das in dem Moment wo die Maus sich über dem DIV befindet per Javascript/jQuery die horizontale Position des Pfeils fix auf dem Rahmen platziert wird und sich die vertikale Position mit der Maus verändert.

 

[MarcoPaulini]

Hi,
soll der Pfeil immer genau unter dem Mauszeiger sein oder soll der Pfeil einfach nur in dem aktuellen DIV-Container (z.B. immer mittig) angezeigt werden?
Wenn der Pfeil immer genau unter dem Mauszeiger sein soll, brauchst du auf jeden Fall JavaScript (würde dir dann jQuery als Framework empfehlen). Wenn der Pfeil einfach immer nur aktuellen Menüpunkt sein soll und dort immer an der gleichen Stelle bleiben soll, solange der Mauszeiger auf diesem Menüpunkt ist, reicht CSS.

 

[tombe]

Immer vorausgesetzt ich habe es jetzt auch richtig verstanden, hier ein kleines Beispiel wie es aussehen könnte:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#menue').hover(
	function(){
		$('#p').css("display", "block");
	},
	function(){
		$('#p').css("display", "none");
	}

);

$('#menue').mousemove(function(e) {
// - 10 entspricht der halben Höhe des Bildes damit es Mittig zum Mauszeiger positioniert ist
		$('#p').css("top", e.pageY - 10);
});

});
</script>

<div id="menue" style="width: 100px; height: 300px; border: solid 1px;">Men&uuml;</div>
<div id="p" style="display: none; position: absolute; left: 110px;">
	<img src="http://www.tutorials.de/style/v11/images/statusicon/forum_new-36.png" width="20" />
</div>

 

[Mario097]

Danke,
das mit dem mittig im Div hört sich nicht schlecht an, wie würde das gehen?

 

[MarcoPaulini]

Naja, falls der Pfeil immer direkt unter dem Mauszeiger sein soll, hat tombe dir ja schon eine Möglichkeit gegeben.
Wenn du kein JavaScript benutzen willst, und der Pfeil nur mittig sein soll, könnte es in CSS so aussehen (ungetestet):

.meinMenuDiv:hover {
background-image: url(pfad/pfeil.png);
background-repeat: no-repeat;
background-position: bottom center;
}

Die background-posotion wirst du wahrscheinlich anpassen müssen. Falls Du bei deinen Menü-Containern schon ein Hintergrundbild hast, musst du das etwas anders lösen aber so ginge es wahrscheinlich am einfachsten.

 

[Mario097]

Und könntet ihr mir bei einem anderen kleinen Problem helfen?

Ich hab eine CSS3 Animation wo hover margin-left "größer" wird dh. der abstand zwischen den Menu´s wird größer und bei mousout soll er langsam in die Original-Größe übergehen.

Geht das mit css3 oder nicht? vlt. gibt es ja irgendeine Funktion "animation backwards bei mouse-out oder so.

 

[tombe]

So geht es:

<style type="text/css">
div.ani {
	width: 200px;
	height: 200px;
	border: solid 1px;
	margin-left: 0px;
	transition-property: margin-left;
    transition-duration: 4s;
}

div.ani:hover {
	margin-left: 25px;
}
</style>

<div class="ani">DIV</div>

Auf dieser Seite ist es toll beschrieben wie die Animation funktioniert.