zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hover (Visitenkarte) soll bleibt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.10.2009, 13:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2009
Beiträge: 3
Apotheosi befindet sich auf einem aufstrebenden Ast
Standard hover (Visitenkarte) soll bleibt

Hallo,

ich habe eine "Visitenkarte" mit CSS realisiert, wo wenn man mit der Maus über ein Bild geht die Visitenkarte angezeigt wird.

Wenn man das Bild mit der Maus verlässt verschwindet allerdings die Visitenkarte, dass will ich nun ändern das die Visitenkarte stehen bleibt.

Leider blick ich das nicht mehr und steh voll auf dem Schlauch! Kann mir jemand einen Tip geben wie ich das mache?

Hier meine CSS:

a.visitenkarte { position:relative; }

a.visitenkarte:hover { color:#fff; z-index:1; }

a.visitenkarte span { visibility:visible; position:absolute; text-decoration:none; display:none;}

a.visitenkarte:hover span, a.visitenkarte:focus span, a.visitenkarte:active span {
z-index:1;
display:block;
visibility:visible;
position:absolute;
top: 70px;
left: 160px;
background-image:url(images/visitenkarte_background.jpg);
width:302px;
height:131px;
border:1px solid #000000;
padding: 30px;}


Vielen Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.10.2009, 13:21
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

Rein mit CSS kannst Du das nicht lösen, da Du nur den Zustand definieren kannst, wie es aussieht, wenn die Maus nicht drüber ist und wenn die Maus drüber ist.

Mit Javascript könntest Du per "onmouseover" eine CSS-Klasse vergeben, welche die Visitenkarte anzeigt und bei "onmouseout" passiert einfach nix.

Das ":hover" bei CSS bedeutet nicht "wenn die Maus den Bereich betritt", sondern "wenn die Maus sich über den Bereich befindet".
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.10.2009, 13:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2009
Beiträge: 3
Apotheosi befindet sich auf einem aufstrebenden Ast
Standard

Hi mantiz,

hmmm wollte eigentlich kein JS benutzen aber wenns nicht anders geht!

Hast du evtl. ein beispiel oder nen Link wie man sowas verwirklicht?

Mfg
Mit Zitat antworten
  #4 (permalink)  
Alt 23.10.2009, 13:35
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

Nur schnell zusammengebastelt, aber das Prinzip sollte klar werden:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<title>[ untitled ]</title>
		<style type="text/css">
			#blub { width:100px; height:100px; border:1px solid #000; }
			.myhover { background-color: #F00; }
		</style>
		<script type="text/javascript">
			function myhover(el) {
				el.className = "myhover";
			}
		</script>
	</head>
	<body>
		
		<div id="blub" onmouseover="myhover(this);"></div>
		
	</body>
	
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 23.10.2009, 13:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2009
Beiträge: 3
Apotheosi befindet sich auf einem aufstrebenden Ast
Standard

Danke Mantiz,

ich probier das mal gleich aus und sag dann bescheid ob ich das hinbekommen habe!

Mit besten Dank

Apotheosi
Mit Zitat antworten
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 19:42 Uhr.