1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Need help removing this hover color

Discussion in 'CSS' started by geekology, Mar 9, 2012.

  1. #1
    I tried using Firebug to find the reason for hover color (blue) of image links. Seems I am missing something.

    If you go to this qtp training course page. You will find there are two images under the video - Download QTP training syllabus as PDF and Download QTP training FAQs as PDF. Now if you hover over any of these images, you can see a blue hover color. I want to remove this hover color.

    Which property should I edit/remove?

    Thanks for your answers.
     
    Solved! View solution.
    geekology, Mar 9, 2012 IP
  2. sunnykatsa

    sunnykatsa Member

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    43
    #2
    Hi geekology,

    On your styles.css

    Try to edit this part:

    .entry a:hover{padding:1px
    0;color:#fff;background:#a90000;border-bottom:none}

    then remove color:#fff;background:#a90000;

    Let me know what happened.

    Regards,
    Katsa
     
    sunnykatsa, Mar 9, 2012 IP
  3. geekology

    geekology Active Member

    Messages:
    545
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Hey sunnykatsa - I tried that but didn't help. Anything else you would want to recommend?
     
    geekology, Mar 9, 2012 IP
  4. onlineworkers

    onlineworkers Active Member

    Messages:
    251
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #4
    can just paste that piece of code fro those two images and its css. It will be around that only.. else go from reverse. find that color code and search it...
     
    onlineworkers, Mar 9, 2012 IP
  5. sunnykatsa

    sunnykatsa Member

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    43
    #5
    Ok, this should work now.

    On your styles.css remove:

    background:#a90000;

    from:

    .entry a:hover{padding:1px
    0;color:#fff;background:#a90000;border-bottom:none}


    and on your custom.css file:

    remove:

    background: #1B37A9;

    from:

    .custom .entry a:hover { color: #fff; background: #1B37A9; }



    Let me know.
     
    sunnykatsa, Mar 9, 2012 IP
    geekology likes this.
  6. #6
    If you have a custom.css file of the theme then find .custom a {} and add this below that:

    .custom a:hover { background: none; }

    But be advised that this will also remove background color on hover from all links on the content area.

    If you specifically want to remove background color of only those two buttoned links while retaining styling on other regular text links, they you need to add a special class to those buttons and write override CSS accordingly.

    Say if you are able to add a class "imgbtn" to those <a> tags which contain those image buttons then your style will be:

    .custom a.imgbtn:hover { background: none; }
     
    czent, Mar 9, 2012 IP
    geekology likes this.
  7. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #7
    Yes sunnykatsa's method should work too. His post was not there while I was posting. Do what he says, it will work.
     
    czent, Mar 9, 2012 IP
  8. sunnykatsa

    sunnykatsa Member

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    43
    #8
    Yeah, that is also an option. However it's currently on wordpress so I only gave geekology the option of editing the css which will appear on the appearance section.

    But assigning a different class with the image is really the best. It's just that a thought that the user may find it complicated editing the index file itself.
     
    sunnykatsa, Mar 9, 2012 IP
  9. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #9
    Yep mate agreed, adding custom class in WP isn't for everyone :)
     
    czent, Mar 9, 2012 IP
  10. geekology

    geekology Active Member

    Messages:
    545
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #10
    Thanks a ton both of you. Since I just wanted to remove the hover from image, I have a created a class as advised by czent and it worked like a charm. + repped both of you :)

    sunnykatsa - I am just inquisitive, how did you find these properties? I analyzed the link using Firebug but couldn't find the color background: #1B37A9; as pointed by you.
     
    geekology, Mar 9, 2012 IP
  11. sunnykatsa

    sunnykatsa Member

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    43
    #11
    @czent - yeah :)

    @geekology - First I did was checked if the hover issue was declared globally and found it not. Second is I looked at the container class since its only inside the div "entry" I managed to check all the properties underneath it. Since it was an image and link related thing, I checked the association of the "img" and "a" under their parent class.

    Thanks for the rep though :)
     
    sunnykatsa, Mar 9, 2012 IP
  12. geekology

    geekology Active Member

    Messages:
    545
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #12
    @sunnykatsa - Cool. And for all this you used Firebug or any other tool from your arsenal?

     
    geekology, Mar 9, 2012 IP
  13. sunnykatsa

    sunnykatsa Member

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    43
    #13
    nah, actually just used a notepad. :) i'm at the office right now and they don't use firebug. it's just that maybe i've been working in the web for like 8 years now so there's a repeating process from time to time.
     
    sunnykatsa, Mar 9, 2012 IP
  14. BooThemes.Com

    BooThemes.Com Active Member

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #14
    I know your problem , some theme use JS to run css .You can check againt with your js file , i think you will find out it
     
    BooThemes.Com, Mar 9, 2012 IP