J
Jan Clemens Faerber
I have a question if it is possible to have this a:hover styled with css sothat it shows an image beside the link.
And I want the image to stay visible when you leave the link with the curser.
in my example files you can catch the image in the middle if you go there very fast with the curser from the link on the left.
ok - you can remove the space between the links and the image - so there isno hurry to reach the image.
but what I am asking for is a solution with CSS in this example where you can also move the mouse to any other (usual) area but the image (shown during a:hover) in the middle keeps on showing.
######## beginning - gallerie.html #########
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS BoxMania * CSS für Einsteiger * Seitenvorlage Basis</title>
<link href="gallerie.css" rel="stylesheet" type="text/css" />
</head>
<body id="home">
<div id="wrapper">
<div id="header">
<h1>CSS BoxMania</h1>
</div><!-- #header -->
<div id="nav">
<ul>
<li class="navhome"><a href="#">home</a></li>
<li class="navteam"><a href="#">team</a></li>
<li class="navprodukte"><a href="#">produkte</a></li>
<li class="navservice"><a href="#">service</a></li>
<li class="navkontakt"><a href="#">kontakt</a></li>
</ul>
</div><!-- #nav -->
<div id="wrap_content">
<div id="col1">col1</div><!-- #col1 -->
<div id="col2">
<div id="gallerie">
<!-- Bild 1 -->
<a class="smallpic" href="bild1.html" target="_blank"><img src="images/bild1_sm.jpg" width="100" height="50" />
<span><img src="images/bild1.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 2 -->
<a class="smallpic" href="#"><img src="images/bild2_sm.jpg" width="100" height="50" />
<span><img src="images/bild2.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 3 -->
<a class="smallpic" href="#"><img src="images/bild3_sm.jpg" width="100" height="50" />
<span><img src="images/bild3.jpg" />
<h5>Bildunterschrift 1</h5></span>
<!-- Bild 4 -->
<a class="smallpic" href="#"><img src="images/bild4_sm.jpg" width="100" height="50" />
<span><img src="images/bild4.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 5 ohne Thumbnail sondern mit Linktext -->
<a class="smallpic" href="#">
Bild 5<span><img src="images/bild5.jpg" />
<h5>Bildunterschrift 5</h5></span>
</a>
</div>
</div><!-- #col2 -->
<div id="menu">
<h6>Weitere Themen</h6>
<ul>
<li><a href="#">Obst</a>
<ul>
<li class="aepfel"><a href="#">Äpfel</a></li>
<li class="birnen"><a href="#">Birnen</a></li>
<li class="kirschen"><a href="#">Kirschen</a></li>
</ul>
</li>
<li><a href="#">Gemüse</a>
<ul>
<li class="tomaten"><a href="#">Tomaten</a></li>
<li class="gurken"><a href="#">Gurken</a></li>
<li class="spinat"><a href="#">Spinat</a></li>
</ul>
</li>
</ul>
</div><!-- #menu -->
<div id="maintext">
<h1>Seitenvorlage Basis flexible Breite</h1>
<p>Consectetuer adipiscing elit. Sed gravida iaculis risus. Maecenas lectus eros, eleifend <a href="#">bibendum</a>, lobortis eget, consequat quis, tortor. Quisque lacinia euismod nunc. Suspendisse lobortis, massa a sollicitudin ultricies, eros felis eleifend risus, imperdiet vulputate est ligula at augue. Duis vitae massa. <a href="#" target="_blank" class="ext">Duis vehicula</a> purus id lacus. Morbi nibh. Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh. <a href="#">Cras mi sem</a>, temporet, congue eget, tristique a, arcu. Sed mattis dui id mauris. Donec non elit ac metus congue commodo. Aenean nec mi. Sed elit. Vestibulum dui.</p>
</div><!-- #maintext -->
</div><!-- #wrap_content -->
<div id="footer">Vorname Nachname · Straße · Telefon</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
######### ending - gallerie.html ##########
######## beginning - gallerie.css #########
/* CSS BoxMania Vorlage Basismodell */
html {
height: 100.5%;
font-size: 62.5%;
}
body {
/* text-align: center; */
font: 1.2em/1.8em Verdana, sans-serif;
}
* {margin: 0px; padding: 0px; border: 0px;}
h1, h2, h3, h4, h5, h6 {
font-family: "Century Gothic", sans-serif;
margin: 0em 0em 0.5em 0em;
color: #004A7F;
}
h1 {
font-size: 2.2em;
border-bottom: 1px dashed #004A7F;
padding-bottom: 0.4em;
font-weight: normal;
}
div#header h1 {border: 0px;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
h6 {font-size: 1.2em;}
a {color: #E3004F; text-decoration: none;}
a:link {}
a:visited {}
a:hover {}
a:active {}
div#wrapper {
/*width: 760px;*/
margin: 0px 40px;
/* text-align: left; */
background: #FAFAFA;
}
div#header {
height: 40px;
background: #FAFAFA;
padding: 10px;
}
div#nav {
background: #FAFAFA;
text-align: right;
margin-bottom: 1.0em;
}
div#nav li {
display: inline;
margin-right: 0.4em;
}
div#nav a {
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 0.2em 1.0em 0.4em 1.0em;
border: 2px solid #CCC;
/*F?r einen 3D-Botton-Effekt f?rben wir den Rahmen oben und rechts anders ein*/
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
background: #F0F0F0;
}
div#nav a:hover,
body#home li.navhome a,
body#team li.navteam a,
body#produkte li.navprodukte a,
body#service li.navservice a,
body#kontakt li.navkontakt a {
background: #E3004F;
color: #FFF;
border: 2px solid #FFF;
border-top: 2px solid #CCC;
border-right: 2px solid #CCC;
}
div#wrap_content {overflow: auto;}
div#menu, div#maintext {padding: 20px 10px;}
div#col1 {
/*float: left;
width: 80px;
background: #EBEBEB;*/
display: none;
}
div#col2 {
float: left;
width: 120px;
padding: 0px 20px;
}
div#gallerie{
position: relative;
height: 600px;
}
a.smallpic{
display: block;
}
a.smallpic img{
border: 1px solid #CCC;
padding: 5px;
margin-bottom: 5px;
}
a.smallpic:hover img{
background: #E3004F;
}
a.smallpic span{
position: absolute;
background: #CCC;
padding: 10px;
left: -1000px;
border: 1px solid #CCC;
visibility: hidden;
color: #333;
text-decoration: none;
}
a.smallpic span img{
border: 0px;
padding: 2px;
}
a.smallpic:hover span{
visibility: visible;
top: 0;
left: 130px;
z-index: 50;
}
div#menu {
float: right;
width: 150px;
padding: 0px 0px 20px 0px;
background: #F0F0F0 url(images/menubox_gradient.jpg) no-repeat right bottom;
border: 1px solid #CCC;
}
div#menu ul {
margin: 20px 20px 0px 20px;
list-style-position: inside;
font-weight: bold;
}
div#menu ul ul {
margin: 0px 0px 10px 14px;
font-weight: normal;
}
div#menu li.subselect {
border-left: 8px solid #E3004F;
padding-left: 4px;
margin-left: 12px;
}
div#menu h6{
margin-bottom: 0em;
padding: 0.4em 1.0em 0.6em 1.0em;
color: #FFF;
line-height: 1.0em;
background: url(images/rounded_box_top.gif) no-repeat;
}
/*
body#home.aepfel li.aepfel a {
border-left: 8px solid #E3004F;
padding-left: 4px;
margin-left: -12px;
}*/
div#maintext {
margin: 0px 160px 0px 190px;
background: #F0F0F0;
}
div#maintext a {padding-bottom: 1px;}
div#maintext a:link {border-bottom: 1px solid #E3004F;}
div#footer {
padding: 2px auto 4px auto;
text-align: center;
background: #CCCCCC;
}
######## ending - gallerie.css #########
And I want the image to stay visible when you leave the link with the curser.
in my example files you can catch the image in the middle if you go there very fast with the curser from the link on the left.
ok - you can remove the space between the links and the image - so there isno hurry to reach the image.
but what I am asking for is a solution with CSS in this example where you can also move the mouse to any other (usual) area but the image (shown during a:hover) in the middle keeps on showing.
######## beginning - gallerie.html #########
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS BoxMania * CSS für Einsteiger * Seitenvorlage Basis</title>
<link href="gallerie.css" rel="stylesheet" type="text/css" />
</head>
<body id="home">
<div id="wrapper">
<div id="header">
<h1>CSS BoxMania</h1>
</div><!-- #header -->
<div id="nav">
<ul>
<li class="navhome"><a href="#">home</a></li>
<li class="navteam"><a href="#">team</a></li>
<li class="navprodukte"><a href="#">produkte</a></li>
<li class="navservice"><a href="#">service</a></li>
<li class="navkontakt"><a href="#">kontakt</a></li>
</ul>
</div><!-- #nav -->
<div id="wrap_content">
<div id="col1">col1</div><!-- #col1 -->
<div id="col2">
<div id="gallerie">
<!-- Bild 1 -->
<a class="smallpic" href="bild1.html" target="_blank"><img src="images/bild1_sm.jpg" width="100" height="50" />
<span><img src="images/bild1.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 2 -->
<a class="smallpic" href="#"><img src="images/bild2_sm.jpg" width="100" height="50" />
<span><img src="images/bild2.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 3 -->
<a class="smallpic" href="#"><img src="images/bild3_sm.jpg" width="100" height="50" />
<span><img src="images/bild3.jpg" />
<h5>Bildunterschrift 1</h5></span>
<!-- Bild 4 -->
<a class="smallpic" href="#"><img src="images/bild4_sm.jpg" width="100" height="50" />
<span><img src="images/bild4.jpg" />
<h5>Bildunterschrift 1</h5></span>
</a>
<!-- Bild 5 ohne Thumbnail sondern mit Linktext -->
<a class="smallpic" href="#">
Bild 5<span><img src="images/bild5.jpg" />
<h5>Bildunterschrift 5</h5></span>
</a>
</div>
</div><!-- #col2 -->
<div id="menu">
<h6>Weitere Themen</h6>
<ul>
<li><a href="#">Obst</a>
<ul>
<li class="aepfel"><a href="#">Äpfel</a></li>
<li class="birnen"><a href="#">Birnen</a></li>
<li class="kirschen"><a href="#">Kirschen</a></li>
</ul>
</li>
<li><a href="#">Gemüse</a>
<ul>
<li class="tomaten"><a href="#">Tomaten</a></li>
<li class="gurken"><a href="#">Gurken</a></li>
<li class="spinat"><a href="#">Spinat</a></li>
</ul>
</li>
</ul>
</div><!-- #menu -->
<div id="maintext">
<h1>Seitenvorlage Basis flexible Breite</h1>
<p>Consectetuer adipiscing elit. Sed gravida iaculis risus. Maecenas lectus eros, eleifend <a href="#">bibendum</a>, lobortis eget, consequat quis, tortor. Quisque lacinia euismod nunc. Suspendisse lobortis, massa a sollicitudin ultricies, eros felis eleifend risus, imperdiet vulputate est ligula at augue. Duis vitae massa. <a href="#" target="_blank" class="ext">Duis vehicula</a> purus id lacus. Morbi nibh. Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh. <a href="#">Cras mi sem</a>, temporet, congue eget, tristique a, arcu. Sed mattis dui id mauris. Donec non elit ac metus congue commodo. Aenean nec mi. Sed elit. Vestibulum dui.</p>
</div><!-- #maintext -->
</div><!-- #wrap_content -->
<div id="footer">Vorname Nachname · Straße · Telefon</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
######### ending - gallerie.html ##########
######## beginning - gallerie.css #########
/* CSS BoxMania Vorlage Basismodell */
html {
height: 100.5%;
font-size: 62.5%;
}
body {
/* text-align: center; */
font: 1.2em/1.8em Verdana, sans-serif;
}
* {margin: 0px; padding: 0px; border: 0px;}
h1, h2, h3, h4, h5, h6 {
font-family: "Century Gothic", sans-serif;
margin: 0em 0em 0.5em 0em;
color: #004A7F;
}
h1 {
font-size: 2.2em;
border-bottom: 1px dashed #004A7F;
padding-bottom: 0.4em;
font-weight: normal;
}
div#header h1 {border: 0px;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
h6 {font-size: 1.2em;}
a {color: #E3004F; text-decoration: none;}
a:link {}
a:visited {}
a:hover {}
a:active {}
div#wrapper {
/*width: 760px;*/
margin: 0px 40px;
/* text-align: left; */
background: #FAFAFA;
}
div#header {
height: 40px;
background: #FAFAFA;
padding: 10px;
}
div#nav {
background: #FAFAFA;
text-align: right;
margin-bottom: 1.0em;
}
div#nav li {
display: inline;
margin-right: 0.4em;
}
div#nav a {
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 0.2em 1.0em 0.4em 1.0em;
border: 2px solid #CCC;
/*F?r einen 3D-Botton-Effekt f?rben wir den Rahmen oben und rechts anders ein*/
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
background: #F0F0F0;
}
div#nav a:hover,
body#home li.navhome a,
body#team li.navteam a,
body#produkte li.navprodukte a,
body#service li.navservice a,
body#kontakt li.navkontakt a {
background: #E3004F;
color: #FFF;
border: 2px solid #FFF;
border-top: 2px solid #CCC;
border-right: 2px solid #CCC;
}
div#wrap_content {overflow: auto;}
div#menu, div#maintext {padding: 20px 10px;}
div#col1 {
/*float: left;
width: 80px;
background: #EBEBEB;*/
display: none;
}
div#col2 {
float: left;
width: 120px;
padding: 0px 20px;
}
div#gallerie{
position: relative;
height: 600px;
}
a.smallpic{
display: block;
}
a.smallpic img{
border: 1px solid #CCC;
padding: 5px;
margin-bottom: 5px;
}
a.smallpic:hover img{
background: #E3004F;
}
a.smallpic span{
position: absolute;
background: #CCC;
padding: 10px;
left: -1000px;
border: 1px solid #CCC;
visibility: hidden;
color: #333;
text-decoration: none;
}
a.smallpic span img{
border: 0px;
padding: 2px;
}
a.smallpic:hover span{
visibility: visible;
top: 0;
left: 130px;
z-index: 50;
}
div#menu {
float: right;
width: 150px;
padding: 0px 0px 20px 0px;
background: #F0F0F0 url(images/menubox_gradient.jpg) no-repeat right bottom;
border: 1px solid #CCC;
}
div#menu ul {
margin: 20px 20px 0px 20px;
list-style-position: inside;
font-weight: bold;
}
div#menu ul ul {
margin: 0px 0px 10px 14px;
font-weight: normal;
}
div#menu li.subselect {
border-left: 8px solid #E3004F;
padding-left: 4px;
margin-left: 12px;
}
div#menu h6{
margin-bottom: 0em;
padding: 0.4em 1.0em 0.6em 1.0em;
color: #FFF;
line-height: 1.0em;
background: url(images/rounded_box_top.gif) no-repeat;
}
/*
body#home.aepfel li.aepfel a {
border-left: 8px solid #E3004F;
padding-left: 4px;
margin-left: -12px;
}*/
div#maintext {
margin: 0px 160px 0px 190px;
background: #F0F0F0;
}
div#maintext a {padding-bottom: 1px;}
div#maintext a:link {border-bottom: 1px solid #E3004F;}
div#footer {
padding: 2px auto 4px auto;
text-align: center;
background: #CCCCCC;
}
######## ending - gallerie.css #########