SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A:hover and images

    Hi all..

    haven't touched CSS in like such a long time.. this must be an easy one!

    I've got all my links underlined on hover

    Code:
     a: hover { border: the usual }
    which includes all linked images. I don't want that on them, I want the images to be free of the borders when hovered. How do I go about it? Selectors?

  2. #2
    SitePoint Enthusiast abbey's Avatar
    Join Date
    Apr 2003
    Location
    Chicago
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [code]

    img {
    border : 0;
    }

    or, just add border="0" to the image tag within the page.
    <abbey />
    HTML/XHTML/CSS coding
    Abbey Ink

  3. #3
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried that sometime ago, didn't work!
    it's weird.

  4. #4
    SitePoint Enthusiast abbey's Avatar
    Join Date
    Apr 2003
    Location
    Chicago
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoops! you told it to have a border - for underlining it's:
    Code:
    a:link { text-decoration : none;}
    a:visited { text-decoration : none;}
    a:hover { text-decoration : underline; }
    I looked at the border and didn't realize that was the problem.
    <abbey />
    HTML/XHTML/CSS coding
    Abbey Ink

  5. #5
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aah i think i could use that solid underline.. it's ok now, but what if I like the dotted line effect? surely I would need to use border-bottom-__?

    that would expose us to the problem once more..

  6. #6
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you absolutely need to use border with the a tag, then you can give the a tags that surround your images a class name (e.g class="images") and then use something like this is your css:

    .images:hover{
    border: none;
    }

  7. #7
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a:hover img { border:0px; }
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.


Bookmarks

Posting Permissions

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