Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

pacman.hgw · 30-11-2011, 09:15

Hallo Leute,

ich bekomme bald eine Krise:
ich versuche schon seit geraumer Zeit ein list-item vor einem Menüpunkt (Textlink) erst bei einem a:hover erscheinen zu lassen, jedoch soll der Bereich vor dem Menüpunkt beim a nicht (!) reagieren.

Mit list-item meine ich nicht "list-style-type",
sondern ein eigenes über background-image eingefügtes Bild.

Ich schaffe es zwar diesen Effekt durch ein padding-left jeweils bei a und a:hover zu erzwingen, jedoch mit dem nicht gewünschten Effekt, dass der Bereich vor dem Menüpunkt schon reagiert.

Das der Bereich davor schon reagiert, ist verständlich, weil ich ihm das ja durch das padding vorgebe, aber ich habe einfach keine andere Lösung.

Kann mir jemand helfen?

Liebe Grüße

pacman

Nightflyer · 30-11-2011, 09:20

Mach mal ein Bild, so ganz verständlich ist das leider noch nicht erklärt

pacman.hgw · 30-11-2011, 09:28

Entschuldige bitte, ist nicht ganz leicht zu erklären.

Zum Bild: Der Bereich, wo der Pfeil erscheint, soll nicht (!) reagieren.
Nur das Wort "About us" soll reagieren. Auch einrücken soll er beim hover nicht.

pacman.hgw · 30-11-2011, 09:31

Code:

a.myHover {
	color:#fff;
	padding-left:20px;
	text-decoration:none;
}
a.myHover:hover {
	background:url(../images/icon_pfeil_menue.gif) no-repeat;
	padding-left:20px;
	color:#f08800;
}

HTML-Code:

<a href="#" class="myHover">About us</a>

webxvideo · 30-11-2011, 09:36

Oder für eine Liste so:

HTML-Code:

<style type="text/css">
<!--
ul{
padding:0;
margin:0;
list-style-type:none;
}
li{
margin:0;
padding-left: 20px;
}
li:hover{
background: url('item.gif') left center no-repeat;
}
-->
</style>

pacman.hgw · 30-11-2011, 09:47

Mit ul und li habe ich das auch schon probiert.
Da reagiert dann der Bereich um den Pfeil auch, leider.

webxvideo · 30-11-2011, 10:15

Welcher Bereich um den Pfeil herum? Eigentlich sollte nur der ein li-Tag auf hover reagieren.

Edit:
Ich glaube ich habe es jetzt verstanden. Ich fürchte das ist dann so nur über JavaScript lösbar.

pacman.hgw · 30-11-2011, 10:20

HTML-Code:

<ul><li><a href="#">About us</a></li></ul>

Nur das Wort "About us" soll das Erscheinen des Pfeils auslösen.
Wenn ich den Mauszeiger vor das Wort "About us" bewege, soll nicht schon der hover ausgelöst werden, jedoch soll an der Position der Pfeil stehen.

webxvideo · 30-11-2011, 10:35

Ich hab es jetzt nicht getestet, aber mit Hilfe von JQuery sollte es so funktioneren:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<script type="text/javascript" src="jquery.js"></script> <!-- JQuery brauchst Du dann natürlich auch noch ->
<script type="text/javascript">
$(document).ready(function() {
	$('ul#navi a').hover(
		function(){
			$(this).parent().addClass('hover');
		},
		function(){
			$(this).parent().removeClass('hover');
		}
	);
}); 
</script>
<style type="text/css">
<!--
ul{
padding:0;
margin:0;
list-style-type:none;
}
li{
margin:0;
padding-left: 20px;
}
li.hover{
background: url('item.gif') left center no-repeat;
}

-->
</style>
</head>
<body>
<ul id="navi">
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</body>
</html>

pacman.hgw · 30-11-2011, 10:38

Danke für die Hilfe. Schade, ich dachte es gibt da eine reine css-Lösung.

webxvideo · 30-11-2011, 10:53

So, jetzt ist mir doch noch eine reine CSS-Lösung eingefallen. Ist etwas konstruiert, aber funktioniert (zumindest im Firefox)

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<style type="text/css">
<!--
ul{
padding:0;
margin:0;
list-style-type:none;
}
li{
margin:0;
padding-left:20px;
}
a{
position: relative;
}
a div{
position: absolute;
left: -20px;
top:0;
height: 1em;
width: 12px;
background: url('item.png') left center no-repeat;
display: none;
}
a:hover div{
display: block;
}

-->
</style>
</head>
<body>
<ul>
<li><a href="link1.html"><div></div>Link 1</a></li>
<li><a href="link2.html"><div></div>Link 2</a></li>
</ul>
</body>
</html>

pacman.hgw · 30-11-2011, 12:41

Toll danke!
Ist es nun auch möglich, das Ganze nicht untereinander,
sonder nebeneinander zu positionieren?

webxvideo · 30-11-2011, 12:51

Jo, mit float:left;
=> SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

pacman.hgw · 30-11-2011, 13:39

Ja super, das klappt wunderbar.
Einzig das beim hover der Bereich um den Pfeil das "mouseout" nicht ermöglicht, stört ein wenig, das lässt sich aber nicht verhindern.

Ich danke Dir! Du hast mit wirklich geholfen.

Lieben Gruß

pacman

EDIT: Scheint doch komplett zu funktionieren.

30-11-2011, 09:15	#1 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	list-item soll erst beim a:hover erscheinen Hallo Leute, ich bekomme bald eine Krise: ich versuche schon seit geraumer Zeit ein list-item vor einem Menüpunkt (Textlink) erst bei einem a:hover erscheinen zu lassen, jedoch soll der Bereich vor dem Menüpunkt beim a nicht (!) reagieren. Mit list-item meine ich nicht "list-style-type", sondern ein eigenes über background-image eingefügtes Bild. Ich schaffe es zwar diesen Effekt durch ein padding-left jeweils bei a und a:hover zu erzwingen, jedoch mit dem nicht gewünschten Effekt, dass der Bereich vor dem Menüpunkt schon reagiert. Das der Bereich davor schon reagiert, ist verständlich, weil ich ihm das ja durch das padding vorgebe, aber ich habe einfach keine andere Lösung. Kann mir jemand helfen? Liebe Grüße pacman

30-11-2011, 09:20	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Mach mal ein Bild, so ganz verständlich ist das leider noch nicht erklärt __________________ (\__/) (='.'=) (")_(")

30-11-2011, 09:36	#5 (permalink)
webxvideo Neuer Benutzer Registriert seit: Nov 2003 Ort: berlin Beiträge: 899	Oder für eine Liste so: HTML-Code: <style type="text/css"> <!-- ul{ padding:0; margin:0; list-style-type:none; } li{ margin:0; padding-left: 20px; } li:hover{ background: url('item.gif') left center no-repeat; } --> </style> __________________ ° OutScout.org - camps for trekking people \| Partyspinne.de

30-11-2011, 10:15	#7 (permalink)
webxvideo Neuer Benutzer Registriert seit: Nov 2003 Ort: berlin Beiträge: 899	Welcher Bereich um den Pfeil herum? Eigentlich sollte nur der ein li-Tag auf hover reagieren. Edit: Ich glaube ich habe es jetzt verstanden. Ich fürchte das ist dann so nur über JavaScript lösbar. __________________ ° OutScout.org - camps for trekking people \| Partyspinne.de Geändert von webxvideo (30-11-2011 um 10:21 Uhr)

30-11-2011, 10:20	#8 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	HTML-Code: <ul><li><a href="#">About us</a></li></ul> Nur das Wort "About us" soll das Erscheinen des Pfeils auslösen. Wenn ich den Mauszeiger vor das Wort "About us" bewege, soll nicht schon der hover ausgelöst werden, jedoch soll an der Position der Pfeil stehen.

30-11-2011, 09:47	#6 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	Mit ul und li habe ich das auch schon probiert. Da reagiert dann der Bereich um den Pfeil auch, leider.

30-11-2011, 10:38	#10 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	Danke für die Hilfe. Schade, ich dachte es gibt da eine reine css-Lösung.

30-11-2011, 12:41	#12 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	Toll danke! Ist es nun auch möglich, das Ganze nicht untereinander, sonder nebeneinander zu positionieren?

30-11-2011, 12:51	#13 (permalink)
webxvideo Neuer Benutzer Registriert seit: Nov 2003 Ort: berlin Beiträge: 899	Jo, mit float:left; => SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen __________________ ° OutScout.org - camps for trekking people \| Partyspinne.de

30-11-2011, 13:39	#14 (permalink)
pacman.hgw INSERT COIN Registriert seit: May 2003 Ort: Hansestadt Greifswald Beiträge: 1.717	Ja super, das klappt wunderbar. Einzig das beim hover der Bereich um den Pfeil das "mouseout" nicht ermöglicht, stört ein wenig, das lässt sich aber nicht verhindern. Ich danke Dir! Du hast mit wirklich geholfen. Lieben Gruß pacman EDIT: Scheint doch komplett zu funktionieren. Geändert von pacman.hgw (30-11-2011 um 13:56 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Flex List - Item deaktivieren?	luschn	Flex programmieren	25	04-05-2009 15:35
[Flash CS3] List(box) doppelklick auf item	hibbert	Flash Einsteiger	0	16-02-2009 14:12
List Item per AS Aktiv/Inaktiv schalten	Chris_8877	Komponenten und SmartClips	1	19-12-2008 07:39
Button soll erst erscheinen wenn MC an Frame 9 is....	KRiskrosfire	Flash MX	11	28-01-2004 13:08
buttons erscheinen erst beim laden	chefboss	Flash MX	10	08-02-2003 23:08