zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hover spricht andere id's an

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.07.2010, 12:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 18
f4k3 befindet sich auf einem aufstrebenden Ast
Standard hover spricht andere id's an

Hallo Leute =)

Ich habe bereits einen Arbeitskollegen gefragt aber der konnte mir nicht weiterhelfen. Nunja in JavaScript lässt sich das leicht lösen aber ich wollte fragen ob es in CSS lösbar ist. Es geht um folgendes:

Ich habe zwei Div-Container (div#link und div#box)
Sobald die Maus über div#link kommt soll sich das Hintergrundbild von div#box ändern. Um es vereinfachter zu erklären:

Ich versuche über mittels hover-Ereignis kurzzeitig Bilder einzublenden. Diese verschwinden dann auch wieder wenn die Maus sich nicht mehr über dem besagten div#link befindet. Man kann sich das so vorstellen das ich selber "titels" einblenden lassen will. In JavaScript habe ich das bereits gelöst aber es gibt noch User die extra JS deaktiviert haben. Beim überfahren der Links bekommen diese keine Information (kurz gesagt titel) angezeigt.

Kann man mittels hover andere id's ansprechen via css? Ich sollte noch erwähnen das die div's kreuz und quer verteilt sind im Dokument, daher die frage ob man andere id's ansprechen kann... Würde mich auf Antworten freuen =)

Hier mal ein angenfanger Beispielcode:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>h</title>
  <link rel="SHORTCUT ICON" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css">
  * {
	padding:0px;
	margin:0px;
	}

html, body {
	height:100%;
	width:100%;
	}

img {
	border:none;
	}

div#link {
	width:100px;
	height:50px;
	border:1px solid black;
	}
	
div#box {
	width:100px;
	height:50px;
	border:1px solid black;
	background-color:red;
	}
  </style>

 </head>
 <body>
  <div id="link"><img src="spacer.gif" width="100" height="50" /></div>
  <div id="box">box</div>
 </body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.07.2010, 13:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

In welchen Beziehungen Elemente zueinander stehen müssen, damit du sie mit CSS ansprechen kannst, findest du heraus, wenn du dich mit Selektoren beschäftigst.
In deinem Code ist beispielsweise #link:hover + #box möglich.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.07.2010, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 18
f4k3 befindet sich auf einem aufstrebenden Ast
Standard

Supiii das war das Wort was mir gefehlt hat zum googlen

Selektoren - Einführung in CSS - Einführung in XHTML, CSS und Webdesign - Michael Jendryschik

Bin noch garnicht soweit gekommen im Buch. Vielen vielen Dank, genau das war es was ich gesucht habe !

edit ---

Also ich hab da jetzt mal ein wenig mit rum gebastelt. Mir ist aufgelfallen das dein Tip mit dm "+" für direkter Nachbarkombinator gedacht ist. Da ich ja die Div's kruez und quer habe funktioniert diese Teil nicht auf allen =(

Geändert von f4k3 (08.07.2010 um 14:25 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.07.2010, 14:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ja, Selektoren sind kontextabhängig, deshalb ist mein Beispiel nur auf dein Beispiel bezogen.
Niemand hier kennt den tatsächlichen Kontext.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.07.2010, 15:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 18
f4k3 befindet sich auf einem aufstrebenden Ast
Standard

Verstehe, ok ich poste dann mal mein Vorhaben hier rein. Hier ist eine Navigation:

HTML-Code:
<ul id="navigation"> 
     <li class="spacer one">&nbsp;</li>
     <li class="icons about"><a href="#" onclick="alert('Diese Funktion steht leider noch nicht zur Verfügung =(');return false"><img src="img/spacer.gif" width="100%" height="100%" alt="#" /></a></li>
     <li class="spacer t-about">&nbsp;</li>
     <li class="clr">&nbsp;</li>
     <li class="spacer t-contact">&nbsp;</li>
     <li class="icons contact"><a href="#" onclick="alert('Diese Funktion steht leider noch nicht zur Verfügung =(');return false"><img src="img/spacer.gif" width="100%" height="100%" alt="#" /></a></li>
     <li class="spacer two">&nbsp;</li>
     <li class="clr">&nbsp;</li>
     <li class="spacer three">&nbsp;</li>
     <li class="icons facebook"><a href="#" onclick="alert('Diese Funktion steht leider noch nicht zur Verfügung =(');return false"><img src="img/spacer.gif" width="100%" height="100%" alt="#" /></a></li>
     <li class="spacer four">&nbsp;</li>
     <li class="icons imprint"><a href="#" onclick="alert('Diese Funktion steht leider noch nicht zur Verfügung =(');return false"><img src="img/spacer.gif" width="100%" height="100%" alt="#" /></a></li>
     <li class="spacer t-imprint">&nbsp;</li>
     <li class="clr">&nbsp;</li>
     <li class="spacer t-facebook">&nbsp;</li>
     <li class="icons deviantart"><a href="#" onclick="alert('Diese Funktion steht leider noch nicht zur Verfügung =(');return false"><img src="img/spacer.gif" width="100%" height="100%" alt="#" /></a></li>
     <li class="spacer five">&nbsp;</li>
     <li class="clr">&nbsp;</li>
     <li class="spacer six">&nbsp;</li>
     <li class="spacer t-deviantart">&nbsp;</li>
    </ul>

Hier dazu die CSS:

HTML-Code:
/*************** Navigation ***************/

.about:hover + .t-about {
	background-image:url('img/nav_about_lbl.png');
	}
	
.contact:hover ~ .t-contact {
	background-image:url('img/nav_contact_lbl.png');
	}

.facebook:hover + .t-facebook {
	background-image:url('img/nav_facebook_lbl.png');
	}

.imprint:hover + .t-imprint {
	background-image:url('img/nav_imprint_lbl.png');
	}

.deviantart:hover + .t-deviantart {
	background-image:url('img/nav_deviantart_lbl.png');
	}

ul#navigation {
	height:175px;
	width:222px;
	display:block;
	text-align:center;
	color:#969696;
	}

li.spacer {
	float:left;
	list-style-type:none;
	}

li.one {
	width:40px;
	height:35px;
	}

li.two {
	width:70px;
	height:35px;
	}

li.three {
	width:20px;
	height:35px;
	}

li.four {
	width:35px;
	height:35px;
	}

li.five {
	width:30px;
	height:35px;
	}

li.six {
	width:70px;
	height:35px;
	}

li.icons {
	width:30px;
	height:35px;
	float:left;
	background-repeat:no-repeat;
 	list-style-type:none;
	}

li.about {
	width:30px;
	height:35px;
	background-image:url('img/nav_about_ico_nml.png');
	}

li.contact {
	width:30px;
	height:35px;
	background-image:url('img/nav_contact_ico_nml.png');
	}

li.facebook {
	width:30px;
	height:35px;
	background-image:url('img/nav_facebook_ico_nml.png');
	}

li.imprint {
	width:30px;
	height:35px;
	background-image:url('img/nav_imprint_ico_nml.png');
	}

li.deviantart {
	width:30px;
	height:35px;
	background-image:url('img/nav_deviantart_ico_nml.png');
	}

li.t-about {
	width:152px;
	height:35px;
	}

li.t-contact {
	width:122px;
	height:35px;
	}
	
li.t-imprint {
	width:107px;
	height:35px;
	}

li.t-facebook {
	width:162px;
	height:35px;
	}

li.t-deviantart {
	width:152px;
	height:35px;
	}

li.clr {
	clear:both;
	width:0px;
	height:0px;
	list-style-type:none;
	}
"about" und "imprint" klappen wunderbar. obwohl ich "~" bei "contact" gesetzt habe klappt es nicht. Die darauf folgenden Werte habe ich extra auf "+" gesetzt, da ich hier nicht weiß wie es weiter gehen soll =(
Mit Zitat antworten
  #6 (permalink)  
Alt 08.07.2010, 16:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Bitte lies und beachte die Hinweise für Fragende -- Codeschnipsel bringen nichts, schon gar nicht, wenn es um Bilder gehen soll.

Zitat:
"about" und "imprint" klappen wunderbar.
Da werden jeweils Nachbarn selektiert.

Zitat:
obwohl ich "~" bei "contact" gesetzt habe klappt es nicht.
Warum liegt t-contact vor contact?

Warum da so chaotisch leere Elemente in der Liste herumliegen kann ich nicht nachvollziehen. Ich verstehe nicht, was das werden soll, tut mir leid.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.07.2010, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 18
f4k3 befindet sich auf einem aufstrebenden Ast
Standard

Sorry ich hätte wissen müssen das sowas kommt...

Es muss dir nicht Leid tun =D Hier ein Bild um es dir zu zeigen:


Die gelben Linien sind von Firebug. Stehen für <li> Elemente! Und nicht stuzig werden warum sich die <li's> überlappen... Ich weiß es selber nicht aber dennoch funktioniert es so einwandfrei ohne das irgendein Element verschoben oder weggedrückt wird beim hovern. Vielleicht ist es auch nur eine unkorekte Anzeige von Firebug...
Wenn die Maus über die das jeweilige Icon komm erscheint das dazugehörige title als Grafik (Diese sind natürlich am Anfang alle nicht sichtbar, soll ja erst beim hovern erscheinen. Ich musste Spacer einbauen damit alles gut aussieht. ich hätte auch anstelle &nbsp; auch transparente Gifs benutzen oder komplett das Element leer lassen können allerdings steht dies ja nicht zur Debatte

Es ist halt ne spacige Navigation und nix schlichtes ^^ Ist mein Vorhaben denn überhaupt lösbar mit Selektoren? Da ich auch Grafiken unterhalb des Icons einblende passt das mit der Benachbarung nicht so ganz...

Geändert von f4k3 (08.07.2010 um 16:37 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.07.2010, 16:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Auch ein Bild erklärt nicht, was du vorhast. Poste einen Link!

Du brauchst ganz sicher keine "Spacer". Für Abstände gibt es Margin und Padding.
Schreib eine Liste auf, die nur die Listenpunkte enthält, die Inhalt deiner Navigation sind. Ich sehe 5 Punkte.
Eine sinnvolle Technik für grafische Navigationen findest du unter FAQ Punkt 15.
Für reine grafische Elemente brauchst du keinen eigenen Listenpunkt. Sowas wird nur als Hintergrundbild ins Stylesheet gesetzt -- in bereits vorhandene Elemente.

Wenn du bei Hover Inhalte anzeigen willst, die im Zusammenhang mit einem Menüpunkt stehen, dann sollten sie auch Inhalt dieses Listenpunktes sein -- und keine weit entfernten Nachbarn. Die Position dieser Elemente kann man mit CSS nach Belieben festlegen.
Mit Zitat antworten
  #9 (permalink)  
Alt 08.07.2010, 17:02
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Sorry, wenn ich mich einmische, aber ich hab' gerade mal Mr. G**gle gefragt und er nannte mir folgenden Link: Stu Nicholls | CSSplay | A CSS image map tutorial

Ich denke das ist genau das, was Du gebrauchen könntest.
Aber bitte arbeite das Tutorial durch und versuche zu verstehen, wie dort was und vor allem wieso gemacht wird.

Dann solltest Du das Menü ohne viel Schnick-Schnack genauso umsetzen können, wie du es haben möchtest (falls ich es richtig verstanden habe ).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.07.2010, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 18
f4k3 befindet sich auf einem aufstrebenden Ast
Standard

Dennoch wird meine Frage nicht beantwortet ob es möglich ist oder nicht -.-. Sorry aber ich bin noch recht neu auf dem Gebiet der HTML und CSS ich lerne es derzeit in meiner Ausbildung...

Zitat:
Wenn du bei Hover Inhalte anzeigen willst, die im Zusammenhang mit einem Menüpunkt stehen, dann sollten sie auch Inhalt dieses Listenpunktes sein -- und keine weit entfernten Nachbarn. Die Position dieser Elemente kann man mit CSS nach Belieben festlegen.
Das heißt soviel wie: nein? Wie du im Beispiel Bild SEHEN kannst MUSS die Navigation am Ende so aussehen. Padding und Margin ist zwar eine gute Idee aber wird das dann nicht unterschiedlich dargestellt in jedem Browser? Bitte keine weiteren Vorschläge nennen wie man es anders machen könnte, Ich nehme gerne Tipps an aber ich poste diese Frage nicht umsonst hier rein da ich Hilfe hierfür brauche und keinen anderen Navigationsaufbau. Den Tipp mit padding und margin werde ich natürlich beachten da ich dadurch ja dann <li's> einspare aber wie gesagt es muss in den gängisten Browser super aussehen (IE,FF,Opera...)

Hier ein Link zum derzeitigen Aufbau: H

edit ---

@ mantiz: Hast den post abgeschickt während ich am schreiben war =D. Ich werds mir mal durchlesen.

Geändert von f4k3 (08.07.2010 um 17:14 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

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 are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 20:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 18:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:15 Uhr.