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
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie Question about a:hover

    Hello,
    I have text in a div id in an unordered list. All of the test are links. So the css sheet reads something like the following


    <div id = "links">
    <ul><li><a href="http:www.somesite.com" target = "blank">somesite.com</a></li>


    So my question is where do I place a:hover {color:#FF0000;} , if that is the code , so that all the links turn red on hover?
    Thank you, Diane

  • #2
    Regular Coder
    Join Date
    May 2006
    Location
    Wales
    Posts
    820
    Thanks
    1
    Thanked 82 Times in 79 Posts
    You have to put pseudo classes in either a stylesheet or within <style> tags:

    PHP Code:
    <html><head>
    <
    style type="text/css">
    a:hover {
    color:#ff0000;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div id "links">
    <
    ul><li>
    <
    a href="http:www.somesite.com" target "blank">somesite.com</a>
    </
    li>
    </
    ul>
    </
    body>
    </
    html

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    You can place rules such as "a:hover { color: #f00; }" in one of two places:

    in between the <head> section of the html file, such as:

    Code:
    <style type="text/css">
      a:hover { color: #f00; }
    </style>
    Or you could put the "a:hover { color: #f00; }" in a file such as "style.css" and link to it in the same <head> section with a <link> tag, such as:

    Code:
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello, I appreciate the very quick replies but I am still not sure where to put the tags. I tried putting it at the top of the css style sheet but that moved the div far away from where I had placed it. I have tried putting the code after the id tag, that does nothing. The id class on the css style sheet reads as follows

    #links
    {font-family:"Times Roman;
    font-size:12 px;
    font-weight: normal;
    left:291px;
    top:140px;
    line-height:20px;width:393px;
    list-style-positionutside;
    list-style-type:circle;}
    so exactly where do I place the hover code?
    Thanks again, Diane
    Last edited by webnation; 09-30-2007 at 11:15 PM.

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    In your style sheet:
    Code:
    #links 
         {font-family:"Times Roman;
           font-size:12 px;
    font-weight: normal;
    left:291px;
    top:140px;
    line-height:20px;width:393px;
    list-style-position:outside;
    list-style-type:circle;}
    
    #links ul li  a {
    << put link style here; >>
    }
    #links ul li  a:hover {
    << put on:hover link style here; >>
    }
    Replace the red lines with valid style information



  •  

    Posting Permissions

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