Grow your CSS skills. Land your dream job.

How to create a mouseover for posts

  • # March 5, 2013 at 10:19 am

    Hi everybody
    How to create a mouseover for posts
    [My Site](http://www.retete-super.ro “”)
    I have 10 posts on the front page color #ECF0F4
    I want to change the color when you put your mouse over the post in color #99ADC2
    Thank you!

    # March 5, 2013 at 10:21 am

    What about the :hover pseudo-class?

    # March 5, 2013 at 10:29 am

    I want to do mouseover for posts
    exactly as in the example
    [Example](http://http://www.daikin.ro/support-and-manuals/index.jsp “”)

    # March 5, 2013 at 10:31 am

    Link doesn’t work AND you don’t seem to have listened to @HugoGiraudel

    # March 5, 2013 at 10:55 am

    [site example](http://www.daikin.ro/support-and-manuals/index.jsp “”)

    # March 5, 2013 at 11:03 am

    We know what it looks like…have you considered the suggestion from @HugoGiraudel ?

    Do you know how to apply it?

    I’m guessing something like…

    .art-post-inner:hover {
    background: insert your color;
    }

    # March 5, 2013 at 11:13 am

    .art-post-body:hover {
    background-color: #99ADC2;
    }

    You could use that, but you are using :before :after to add background images (rounded corners). I would suggest refactoring the code and using CSS instead of images… then it would be much easier to apply hover fx.

    Hope that helps,
    Alen

    # March 5, 2013 at 11:29 am

    @AlenAbdula Yeah…that was my next thing… :)

    # March 5, 2013 at 4:04 pm

    Hi everyone,
    We have added the following code
    The code is:
    .art-post-body:hover {
    background-color: #99ADC2;
    }
    I see a rectangle instead of a rounded rectangle
    You may have to add code?
    Thank you!

    .art-post
    {
    max-width:974px;
    margin: 7px;
    }
    .art-post-body
    {
    padding:14px;
    min-width:2px;
    min-height:2px;
    }
    .art-post:before, .art-post:after
    {
    content: url(‘images/post_t.png’);
    font-size: 0;
    background-image: url(‘images/post_b.png’);
    }
    .art-post:after{
    clip:rect(auto, auto, auto, 959px);
    }
    .art-post:before,.art-post-body:before{
    right:15px;
    }
    .art-post-body:after{
    width: 15px;
    top:15px;
    bottom:15px;
    background-image:url(‘images/post.png’);
    }
    .art-post-body:hover {
    background-color: #99ADC2;
    }
    .art-post-body:before{
    top:15px;
    bottom:15px;
    background-image:url(‘images/post.png’);
    }

    # March 6, 2013 at 4:05 am

    Does anyone know what needs to be changed?

    # March 6, 2013 at 5:27 am

    You would have to stop using the images for the borders/border-radius….are you willing to do that?

    # March 6, 2013 at 7:08 am

    Otherwise you can’t do
    Thank you

    # March 6, 2013 at 7:15 am

    >Otherwise you can’t do Thank you

    Nope…you are using background images for the backgrounds and borders.

    I suppose you could use different images in the hover states but, frankly, there is nothing there that actually **requires** images.

    The borders / border radius and backgrounds can all be replicated with CSS as far as I can see. The radius would not show below IE9 but that isn’t a big loss.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".