How to keep an a:hover effect with css like "onMouseOut()"?

Discussion in 'HTML' started by Jan Clemens Faerber, Apr 4, 2013.

  1. 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&uuml;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="#">&Auml;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&uuml;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 &middot; Stra&szlig;e &middot; 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 #########
     
    Jan Clemens Faerber, Apr 4, 2013
    #1
    1. Advertising

  2. Jan Clemens Faerber

    Gus Richter Guest

    On 4/4/2013 1:32 PM, Jan Clemens Faerber wrote:
    > I have a question if it is possible to have this a:hover styled with css so that it shows an image beside the link.
    > And I want the image to stay visible when you leave the link with the curser.


    Look through this to get some ideas:
    <http://www.cssplay.co.uk/search.html?cx=partner-pub-6651950180071236%3Achrtwm-4ria&cof=FORID%3A10&ie=UTF-8&q=hover&sa=+Search>

    --
    Gus
     
    Gus Richter, Apr 4, 2013
    #2
    1. Advertising

  3. On Thursday, April 4, 2013 9:16:14 PM UTC+2, Gus Richter wrote:
    > Look through this to get some ideas:
    >
    > <http://www.cssplay.co.uk/


    This page is great! Thank you very much!
     
    Jan Clemens Faerber, Apr 5, 2013
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jack

    Hover effect in Calender Control

    jack, Jan 2, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    519
    Christopher Reed
    Jan 3, 2006
  2. jack
    Replies:
    8
    Views:
    33,580
    tooMuchCode
    May 12, 2009
  3. Christopher Reed

    Re: Hover effect in Calender Control

    Christopher Reed, Jan 3, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    443
    Christopher Reed
    Jan 3, 2006
  4. R.A.M.
    Replies:
    3
    Views:
    550
    Bergamot
    Nov 11, 2007
  5. Replies:
    5
    Views:
    230
Loading...

Share This Page