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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Link within a div

    Hi Guys,

    How to you create hovers on a tags for all elements within a div id:

    I thought it would be something like:

    Code:
    a.#main :link {
    	  font: normal 12px Georgia, arial, verdana, sans-serif;
       font-weight:bold;
         color: #333; 
    	text-decoration: none;
    	}
    a.#main :visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
    a.#main :hover {color: #333; text-decoration: none;  border-bottom: 1px dashed #333;}
    a.#main :active {color: #333;  text-decoration: none; border-bottom: 1px dashed #333;}
    Anyone help please?

    Thanks

  • #2
    New Coder
    Join Date
    Nov 2006
    Location
    Bristol, UK
    Posts
    85
    Thanks
    6
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by stfc_boy View Post
    Hi Guys,

    How to you create hovers on a tags for all elements within a div id:

    I thought it would be something like:

    Code:
    a.#main :link {
    	  font: normal 12px Georgia, arial, verdana, sans-serif;
       font-weight:bold;
         color: #333; 
    	text-decoration: none;
    	}
    a.#main :visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
    a.#main :hover {color: #333; text-decoration: none;  border-bottom: 1px dashed #333;}
    a.#main :active {color: #333;  text-decoration: none; border-bottom: 1px dashed #333;}
    Anyone help please?

    Thanks
    If your div's id is 'main' and you want to style ALL links within it, use the following:

    Code:
    #main a {
    	  font: normal 12px Georgia, arial, verdana, sans-serif;
       font-weight:bold;
         color: #333; 
    	text-decoration: none;
    	}
    #main a:visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
    #main a:hover {color: #333; text-decoration: none;  border-bottom: 1px dashed #333;}
    #main a:active {color: #333;  text-decoration: none; border-bottom: 1px dashed #333;}
    Hope this helps.
    Never argue with an idiot... they'll bring you down to their level and beat you with experience...

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Try removing the spaces between the identifier and the colon. use 'a.#main:hover' rather than 'a.#main :hover'.

    John

  • #4
    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
    If you look at my Sources program, It uses hovers in lists in divs. Check the code it may help you. (View source.)

    http://exitfegs.co.uk/Sources.html -

    Frank
    Last edited by effpeetee; 02-13-2008 at 12:33 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    I you write something like :hover {background-color: yellow;} then this will affect all elements because it’s the same as writing *:hover {…}, so you’re correct in having the spaces between the first selector and the pseudo class. However, you do have some errors in your CSS, namely this: a.#main – you can’t have both, a class selector (period), and an ID selector (number sign), you have to decide. You said you have a div with ID “main” so your selector must read #main :hover {…}

    Edit: Oh hang on, I just got it! You want a hover effect only on all anchors in the div called “main”? Then you must write #main a:hover {…} First comes the parent element selector then the child.


  •  

    Posting Permissions

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