Problem in applying {A :hover} effect

Discussion in 'HTML & Website Design' started by moneyzeal, Oct 9, 2008.

0
  1. #1
    I cant apply {A:hover} effect in my "related post" item of my blogger blog.
    Here is the code I used to do it:

    <div id='data2007' style='color:#555555;a:hover{text-decoration:underline; color:#333};height:auto; overflow:auto;width:70%;float:left;font-family:Arial; font-size:12px;font-weight: bold;padding-top: 2px'/><br/><br/>

    Moreover, The text color also remains red,(#990000) (my page default list text color).

    How can I change the text color and apply a hover effect to my related post Item??
     
    moneyzeal, Oct 9, 2008 IP
  2. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #2
    thanks alot of code for a simple task ! -

    Shouldnt it be -

    Replace this -

    a:hover{text-decoration:underline; color:#333};

    WITH THIS -

    a:hover{text-decoration:underline; color:#333;}
     
    Funk-woo10, Oct 9, 2008 IP
  3. BuzzyDev

    BuzzyDev Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I would suggest not using inline css, it looks quite weird. create your css file externally and attach it to the HTML file by using and @import clause
     
    BuzzyDev, Oct 9, 2008 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hrmm. I might be wrong but I don't think you can declare a child element's state inline. I've never tried to anyway. You would need to apply a class to the containing divider, and style that divider accordingly, or style the anchor.

    <div class="linkHover">This <a href="#">link</a> will hover.</div>
    HTML:
    <div>This <a href="#" class="hover">link</a> will hover.</div>
    HTML:
     
    steelfrog, Oct 9, 2008 IP
  5. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Agreed also, make an external css file.
     
    Funk-woo10, Oct 9, 2008 IP
  6. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #6
    There are 4 status for a attributor as following.

    a:link {}
    a:hover {}
    a:active {}
    a:visited {}
    try different colors for them, you will find out the answer.
    I guess you don't apply different color/effects on hover , link and active.
    Have a try, guy.
     
    justinlorder, Oct 9, 2008 IP
  7. moneyzeal

    moneyzeal Peon

    Messages:
    109
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thank you all for your support.I will try your suggestions. And mistakenly, it was posted again in CSS sub forum.
    I am sorry for that.Thank you very much.
     
    moneyzeal, Oct 9, 2008 IP
  8. rajku

    rajku Member

    Messages:
    37
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    33
    #8
    Hey buddy, add this in the blogger style sheet at the top.

    #data2007 a{'color:#555555;height:auto; overflow:auto;width:70%;float:left;font-family:Arial; font-size:12px;font-weight: bold;padding-top: 2px}
    #data2007 a:hover{text-decoration:underline; color:#333}

    and remove the inline style. It will work.
     
    rajku, Oct 10, 2008 IP