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 7 of 7

Thread: a:hover img

  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a:hover img

    'm trying to over ride a hover problem now. In my content div on one page I have text and links, so the style page has something like

    Code:
    #content a:hover {
    color: #FFA200;
    text-decoration: none;
    background: none;
    border-bottom: 2px solid #FFA200;
    }
    ok, but the links page, uses the same style, so the affiliate buttons which also use <a> inherit that style, now I have tried to use #content a:hover img { border:0; but it doesn't appear to be over riding the border-bottom hover effect. Is there any way to over come this other than having the links page load up a completly seperate style sheet?

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephen,

    If you embed the specific styles for the links page within the < head > of the links page, that should solve the problem, as embedded styles should override linked styles:

    Code:
    <head>
    <!-- all your usual head stuff -->
    <style type="text/css">
    a img { border: none; }
    </style>
    </head>
    Give it a try,

    Gary

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply,

    I tried it out and added it in to the head of the page, however it does not override the other style.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah....can you post your full code, or even better a link?

    Gary

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <style type="text/css">
    #links .links a {
    border: 0;
    font-size: 0;
    border-bottom: 0;
    }
    #links .links a:hover {
    border: 0;
    }
    #links .links a img {
    border: 0;
    }
    </style>
    try that to replace what Gary wrote. You might run into conflicts if you out any text links inside the <p class="links"> .
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, it works. Thanks! I was so close too..


  •  

    Posting Permissions

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