WordPress.org

Ready to get started?Download WordPress

Forums

Hover Link Color Problem (10 posts)

  1. 988066
    Member
    Posted 9 years ago #

    Over at my site I have images as links in the menu on the right-hand side. I have my stylesheet set up so that images that are links are to have a colored border around them when hovered over. It works in posts and pages, but not in the menu, for some reason. Can anyone help me figure out how to get this working? Thanks!

  2. Lorelle
    Member
    Posted 9 years ago #

    First, you have some validation errors that need to be fixed.

    Second, I'm using Firefox and I see no color borders on anything when I move my mouse over all the links. Nothing. Can you be more specific about which things are supposed to hover?

  3. 988066
    Member
    Posted 9 years ago #

    Okay, I fixed all of the validation errors. Thanks for pointing that out.

    Now, the border colors I'm speaking of are only supposed to appear when you hover over images which act as links, such as the images in the menu. I have my stylesheet set so that a blue border is supposed to appear around around images acting as links, and when I tested it, it worked when the image was placed in the content area, but it doesn't work on the images in the sidebar menu. I can't figure out why. If you want me to post my stylesheet, I can do that.

    Thanks.

  4. Lorelle
    Member
    Posted 9 years ago #

    No, don't post your stylesheet. Too much information.

    I validated your CSS and got this:

    * Line: 461 Context : .commentlist li
    Parse Error - // list-style: inside decimal;
    * Line: 465
    Parse Error - : none; } .commentlist p

    But that's not your hover problem.

    I've poured over your style sheet and can't find a single hover that would do what you want. It should look like this:

    a:hover {border:solid blue 2px;padding: 2px}

    Or some variation like that. I see nothing in any of your hovers that would make a border. So either you are working on a different style sheet than the one linked to from your site, or you just haven't put that information in.

    If it ain't there, you ain't gonna see it. One of the great joys of web page design...join the club. ;)

  5. 988066
    Member
    Posted 9 years ago #

    Hmmm...

    Well, I'm sure you've noticed I'm using a stylesheet stolen from Kubrick Two, and I messed around with it to customize. I don't know too much about CSS, as you may have guessed.

    I've posted an image that demonstrates the hovering effect though. See for yourself. You'll notice that when you mouse over it, the border appears. I have no idea why this doesn't happen with the sidebar menu images, however. I'm confused!

  6. Lorelle
    Member
    Posted 9 years ago #

    That I can see in Firefox. However you did that, and I can't find the solution because it doesn't show up in your style.css file, do that in your style.css file.

    If you want EVERY link to hover with a border (not background color but BORDER) then do what I gave you above, without or without the padding, though if you put it on the images, the padding helps to give it a little "space" around the image to show the border, otherwise it might not be visible. Up to you.

    For information on how to do all this, check the http://codex.wordpress.org/ WordPress Codex - official documentation site. They have tons of tips and information on all of this.

  7. vkaryl
    Member
    Posted 9 years ago #

    You've got this code:

    p a img:hover {

    background: #4085BF;

    }

    So that shows your hover border when you place the image centered in the background. That's not exactly a "normal" way to do it, but it works. However, it's specifically selecting images in <p> tags, which may be the problem in your sidebar images.

    Now, you also have in your css the following code:

    a img {

    border: none;

    }

    which may invalidate other img calls as to borders etc.

  8. 988066
    Member
    Posted 9 years ago #

    Heh, just as I was posting, I noticed your reply!

    I'm going to take a look at my css again and see if I can figure this out. Thanks for your tip!

  9. 988066
    Member
    Posted 9 years ago #

    Well, I tried a few things, but nothing has worked out. I think I'm going to give up for now. Thanks for your help though.

  10. samou
    Member
    Posted 9 years ago #

    hi!

    i think that most html editors like dreamweaver has got the option of "image Hover".Just use this feature install of trying to install a script as such.

    ------------
    Samou from
    http://www.jobseek.com.mu

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.