✔ hover Fenster

A

alina-

Mitglied
Hallo

wie geht das, das beim überfahren eines Bildes ein kleines Fenster erscheint?
so wie in etwa hier

ich hab bis jetzt nur diese Lösung gefunden aber das ist noch nicht das wie ich mir es vorstelle
<img src="Bild_1.jpg" title="hier gewünschter text">
 
Hi,

wenn du ein "CSS-Popup" realisieren möchtest, empfehle ich dir hierzu http://brunildo.org/test/#pop

Die Technik basiert auf verschachtelten Elementen, von denen das Kindelement zunächst versteckt wird, und mit Hilfe der :hover-Pseudoklasse eingeblendet wird.

mfg Maik
 
Zusätzlich zu der empfohlenen Seite hab ich dir hier ein Beispiel zusammengestellt, das die drei Möglichkeiten bzgl. der Selektoren vorstellt, mit denen grundsätzlich ein "CSS-Popup" realisiert werden kann.

  1. Selektor für Nachfahren (Selektor-Syntax: E F)
  2. Kind-Selektor (Selektor-Syntax: E > F)
  3. Selektor für benachbarte Elemente (Selektor-Syntax: E + F)

HTML: 
<!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" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-05" />

<title>tutorials.de | hover Fenster</title>

<style type="text/css">
/* <![CDATA[ */
/* Allg. CSS-Einstellungen */
* {
margin:0;
padding:0;
}
body {
font:normal 1em verdana,sans-serif;
}
div.wrapper {
width:600px;
margin:50px auto;
}
div.wrapper ul {
list-style:none;
}
div.wrapper ul ul li {
margin-top:40px;
font-size:0.9em;
}
div.wrapper li p {
margin:10px;
}
div.wrapper h1 {
font-size:1.8em;
font-weight:bold;
border-bottom:1px solid #b5bfca;
color:#b5bfca;
}
div.wrapper h1 span {
position:relative;
top:-6px;
padding:3px 10px;
border-bottom:3px solid #b5bfca;
}
div.wrapper h2 {
font-size:1.6em;
font-weight:bold;
border-bottom:1px solid #b5bfca;
color:#b5bfca;
}
div.wrapper h2 span {
position:relative;
top:-6px;
padding:3px 10px;
border-bottom:3px solid #b5bfca;
}
div.wrapper div {
margin-top:10px;
border:1px solid #cfcfcf;
}
div.parentBox {
position:relative;
}
/* ENDE Allg. CSS-Einstellungen */

     

/* Selektor für Nachfahren */
div.parentBox div.descendantBox {
visibility:hidden;
display:none;
}
div.parentBox:hover div.descendantBox {
visibility:visible;
display:block;
position:absolute;
top:-5px;
right:5px;
background:#3968a6;
color:#fff;
font-weight:bold;
width:150px;
line-height:75px;
text-align:center;
}
/* ENDE Selektor für Nachfahren */


/* Kind-Selektor */
div.parentBox > div.childBox {
visibility:hidden;
display:none;
}
div.parentBox:hover > div.childBox {
visibility:visible;
display:block;
position:absolute;
top:-5px;
right:5px;
background:#3968a6;
color:#fff;
font-weight:bold;
width:150px;
line-height:75px;
text-align:center;
}
/* ENDE Kind-Selektor */


/* Selektor für benachbarte Elemente */
div.adjacentBox {
float:left;
width:285px;
padding:5px;
background:#fdfdfd;
color:#555;
}
div.siblingBox {
visibility:hidden;
display:none;
}
div.adjacentBox:hover + div.siblingBox {
visibility:visible;
display:block;
float:left;
width:285px;
margin-left:5px;
padding:5px;
background:#3968a6;
color:#fff;
}
/* ENDE Selektor für benachbarte Elemente */
/* ]]> */
</style>

</head>
<body>

<div class="wrapper">
     <ul>
         <li><h1><span>Demo: CSS-Popup</span></h1>
              <ul>
                  <li><h2><span>1. Selektor für Nachfahren</span></h2>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div class="descendantBox">descendantBox</div>
                      </div>
                  </li>
                  <li><h2><span>2. Kind-Selektor</span></h2>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div class="childBox">childBox</div>
                      </div>
                  </li>
                  <li><h2><span>3. Selektor für benachbarte Elemente</span></h2>
                      <div class="adjacentBox">
                           <p>adjacentBox</p>
                           <p>adjacentBox</p>
                      </div>
                      <div class="siblingBox">
                           <p>siblingBox</p>
                           <p>siblingBox</p>
                      </div>
                  </li>
              </ul>
         </li>
     </ul>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück