# Mouseover Pfeileffekt



## Mario097 (26. März 2013)

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 (26. März 2013)

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 (26. März 2013)

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


----------



## tombe (26. März 2013)

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 (26. März 2013)

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 (26. März 2013)

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 (26. März 2013)

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


----------



## MarcoPaulini (26. März 2013)

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 (26. März 2013)

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 (26. März 2013)

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.


----------



## Mario097 (26. März 2013)

```
<header>
	<div id="Menubar">
    
    	<a href="#Home"><div id="Home"><span>HOME</span></div></a>
        <a href="#"><div id="Leistungen"><span>LEISTUNGEN</span></div></a>
        <a href="#"><div id="Referenzen"><span>REFERENZEN</span></div></a>
        <a href="#"><div id="Kontakt"><span>KONTAKT</span></div></a>
        <div id="Pfeil" oncontextmenu="return false;"><span>&gt;</span></div>
        
    </div>
</header>
```
CSS:

```
header {
	height:270px;
	width:100%;
	background-color:#282828;
	border-bottom:1px solid #000;
}

/* MENU */

#Menubar {
	width:100%;
	height:50px;
	background-color:transparent;
	position:absolute;
	top:210px;
	float:left;
}

#Home {
	position:relative;
	height:50px;
	width:55px;
	left:40px;
	color:white;
	font-size:130%;
	float:left;
}

#Leistungen {
	position:relative;
	height:50px;
	width:115px;
	margin-left:80px;
	color:white;
	font-size:130%;
	float:left;
}

#Referenzen {
	position:relative;
	height:50px;
	width:120px;
	margin-left:40px;
	color:white;
	font-size:130%;
	float:left;
	transition-property: margin-left;
    transition-duration: 4s;
}

#Kontakt {
	position:relative;
	height:50px;
	width:90px;
	margin-left:40px;
	color:white;
	font-size:130%;
	float:left;
}

#Pfeil {
	position:relative;
	height:50px;
	width:90px;
	margin-left:10px;
	color:white;
	font-size:130%;
	float:left;
	text-transform:
	
}


span {
	position:relative;
	top:12px;
}

#Home:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}

#Leistungen:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}

#Referenzen:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}
#Kontakt:hover { /* schießt pfeil nach rechts  > */
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;

}

@-webkit-keyframes MenuAnimation {
	0% {color:white;}
	10% {color:#6FE6E6;}
	100% {margin-right:35px; color:#6FE6E6;}
}
```
vlt hilft das weiter zum besser verstehen was ich meine. 

Probier mal das Menu durch und dann weißt du was ich meine, es springt zu schnell zurück


----------



## Mario097 (26. März 2013)

und wie mach ich das da so ein Feld kommt mit code darin? danke


----------



## tombe (26. März 2013)

1) Setze bitte deinen Code in die entsprechenden Code-Tags (siehe Signatur)

2) Was für eine Feld mit Code darin?

Gewöhne dir doch bitte an deine Fragen klarer zu stellen und gib dir wenigstens ein bisschen Mühe beim Schreiben!


----------



## Mario097 (26. März 2013)

Ok

Ich möchte meine Animation (siehe Code ) bei "Mouseout" Rückwärts langsam abspielen. 

Html-Code:

```
@-webkit-keyframes MenuAnimation {
	0% {color:white;}
	10% {color:#6FE6E6;}
	100% {margin-right:35px; color:#6FE6E6;}
}

#Home:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}
```


----------



## tombe (27. März 2013)

Ich habe dir oben bereits ein Beispiel gezeigt wie es geht.

Da dein obiger Code nicht das geringste davon enthält gehen ich davon aus das dich die Vorschläge eh nicht interessieren.

Deshalb ist für mich hier jetzt Schluß!


----------



## Mario097 (28. März 2013)

die beispiele haben nicht mit einer Seite zu tun sondern den Code habe ich bei einer anderen website eingebaut bei dieser Animation geht es um eine andere Seite.


----------



## tombe (17. Mai 2013)

So hier die Antwort auf die Frage die du mir per PN gestellt hast. Mit diesem Code wandert das Bild horizontal mit dem Mauszeiger mit:


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

$("span").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("left", e.pageX - 10);
});

});
</script>
```


```
<span style="width: 50px; background-color: #808080;">Men&uuml; 1</span>
<span style="width: 50px; background-color: #00FFFF;">Men&uuml; 2</span>
<span style="width: 50px; background-color: #00FF00;">Men&uuml; 3</span>
<span style="width: 50px; background-color: #0000FF;">Men&uuml; 4</span>
<span style="width: 50px; background-color: #FF00FF;">Men&uuml; 5</span>
<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>
```


----------

