treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] How to create a mouseover for posts

  • Hi everybody How to create a mouseover for posts My Site 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!

  • What about the :hover pseudo-class?

  • I want to do mouseover for posts exactly as in the example Example

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

  • 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;
    }
    
  • .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

  • @AlenAbdula Yeah...that was my next thing... :)

  • 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'); } <code/>

  • Does anyone know what needs to be changed?

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

  • Otherwise you can't do Thank you

  • 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.