Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 30-11-2011, 10:15   #1 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 10:20   #2 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.057
Mach mal ein Bild, so ganz verständlich ist das leider noch nicht erklärt
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 30-11-2011, 10:28   #3 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
Registriert seit: May 2003
Ort: Hansestadt Greifswald
Beiträge: 1.717
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.
Angehängte Grafiken
Dateityp: gif a_normal.gif (360 Bytes, 19x aufgerufen)
Dateityp: gif a_hover.gif (526 Bytes, 19x aufgerufen)
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 10:31   #4 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
Registriert seit: May 2003
Ort: Hansestadt Greifswald
Beiträge: 1.717
Der Quellcode

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>
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 10:36   #5 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 918
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>
webxvideo ist offline   Mit Zitat antworten
Alt 30-11-2011, 10:47   #6 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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.
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 11:15   #7 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 918
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.

Geändert von webxvideo (30-11-2011 um 11:21 Uhr)
webxvideo ist offline   Mit Zitat antworten
Alt 30-11-2011, 11:20   #8 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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.
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 11:35   #9 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 918
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>
webxvideo ist offline   Mit Zitat antworten
Alt 30-11-2011, 11:38   #10 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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.
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 11:53   #11 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 918
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> 
webxvideo ist offline   Mit Zitat antworten
Alt 30-11-2011, 13:41   #12 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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?
pacman.hgw ist offline   Mit Zitat antworten
Alt 30-11-2011, 13:51   #13 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 918
Jo, mit float:left;
=> SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
webxvideo ist offline   Mit Zitat antworten
Alt 30-11-2011, 14:39   #14 (permalink)
INSERT COIN
 
Benutzerbild von pacman.hgw
 
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 14:56 Uhr)
pacman.hgw ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


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


Alle Zeitangaben in WEZ +1. Es ist jetzt 00:52 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele