WordPress.org

Ready to get started?Download WordPress

Forums

CSS Rollover/Hovering (i.e. Highlighting Text Images) (2 posts)

  1. Phillyzero
    Member
    Posted 5 years ago #

    Ive googled a bit, but until now I didnt even now it was call a 'rollover'. What I want to do for my site, is replace my menubar text with images. However, as I quickly became aware of, if you hover the mouse over an image it won't highlight (or be underlined or whatever little decoration you put on) like the text will.

    I know you can do this with javascript, but to my understanding this can be done with regular CSS correct? So the closest I got to getting this right ended up with two distinct problems. First here's the code.

    .archive {
    display: block;
    float: right;
    margin: 0;
    padding: 5px 5px 5px 0;
    background-image: url('/images/archivenormal.png') ;
    }
    
    .archive:hover {
    background-image: url('/images/archivehover.png') ;
    }
    <li class="archive"><a href="http://blackrussiancomics.com/archives" class="hov"><img src="/images/randomblankimage"></a></li>

    1. the bit "no-repeat" didn't work, which would normally go after the image url portion in the CSS. When I put it in the css the image itself didn't show up at all, perhaps this is a space issue?
    2. If I take out no-repeat, it still doesn't work unless I have an image in the html (so I used a blank .png box for that).

    Also note the entire bits of float, display, margin, padding etc did not alter anything. The only way I prevented a repeating of the images was by reducing the html blank image size.

    Obviously I ended up with huge misalignments and some of the images even repeated (vertically). I'm not sure if I need to post the menu/menubar CSS stuff as well.

    Any help or guides to a tutorial would be appreciated.

  2. Phillyzero
    Member
    Posted 5 years ago #

    Err...I edited my post a little bit and it seems to have disappeared. So in case; here's the original post.

    Ive googled a bit, but until now I didnt even now it was call a 'rollover'. What I want to do for my site black russian comics, is replace my menubar text with images. However, as I quickly became aware of, if you hover the mouse over an image it won't highlight (or be underlined or whatever little decoration you put on) like the text will.

    I know you can do this with javascript, but to my understanding this can be done with regular CSS correct? So the closest I got to getting this right ended up with two distinct problems. First here's the code.

    .archive {
    display: block;
    float: right;
    margin: 0;
    padding: 5px 5px 5px 0;
    background-image: url('/images/archivenormal.png') ;
    }
    
    .archive:hover {
    background-image: url('/images/archivehover.png') ;
    }
    <li class="archive"><a href="http://blackrussiancomics.com/archives" class="hov"><img src="/images/randomblankimage"></a></li>

    1. the bit "no-repeat" didn't work, which would normally go after the image url portion in the CSS. When I put it in the css the image itself didn't show up at all, perhaps this is a space issue?
    2. If I take out no-repeat, it still doesn't work unless I have an image in the html (so I used a blank .png box for that).

    Also note the entire bits of float, display, margin, padding etc did not alter anything. The only way I prevented a repeating of the images was by reducing the html blank image size.

    Obviously I ended up with huge misalignments and some of the images even repeated (vertically). I'm not sure if I need to post the menu/menubar CSS stuff as well.

    Any help or guides to a tutorial would be appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic