Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: CSS Rollover

  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Rollover

    Im creating a top navigational bar, and I seem to be having to problems with a roll over effect.

    I'm trying to create a background colour appear behind the text when the cursor rolls over it.

    I am also trying to do the same thing again, but this time I only want a bottom-border to be shown in my specified colour when the cursor rolls over the text.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I don't know whether this will help.

    Useful URL http://wellstyled.com/css-nopreload-rollovers.html

    My website might also help.

    http://www.exitfegs.co.uk/steve.html

    This menu uses css to produce a picture when a thumbnail is hovered over.

    Frank - alias effpeetee

    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .gallerycontainer{
    position: relative;
    height:700px
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    }
    
    div#thumbnails {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
    
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left:550px;
    top:1150px
    border: 1px dashed gray;
    visibility:hidden;
    color: black;
    text-decoration: none;
    text-align:center;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 150px;
    left: 90px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    
    </style>
    Last edited by effpeetee; 08-09-2007 at 09:36 PM. Reason: Omitted URL
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Aug 2007
    Location
    Minnesota
    Posts
    21
    Thanks
    0
    Thanked 1 Time in 1 Post
    for creating rollovers with CSS, this is what I do....I think this is what you are asking about:

    Code:
    #button1 a:link {background-color: blue; border: none;}
    #button1 a:visited {background-color: blue; border: none;}
    #button1 a:hover {background-color: red; border-bottom: 1px solid black;}
    #button1 a:active {background-color: red; border-bottom: 1px solid black;}
    hope this is what you are asking about.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •