Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change padding of “p” inside a “div” on :hover

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34764
    ricnunes
    Member

    Hello!

    I’m having a bit of a trouble here and would like some help…

    If you click the link below, you will see the problem… If I place my mouse over the text, everything works fine, but when I remove the mouse from the text, it goes back to the original position…

    I’ve tried to instead of having it change the padding of the “p” tag, change the width of the “div”, but the same problem occurs.. It probably is something really easy, but I’ve been blocking on this for a few hours now :|

    Also, if you want, check the second page (just click the box) and please tell me if I should change anything in the code of those boxes, since it was a struggle of 2 hours and it has the Jscript hardcoded in the OnClick event.

    Link to website

    Thank you very much in advance :)

    #89028
    thomas
    Member

    Can you create a simplified version of the problem? I didn’t dig through all of your code, but it looks like you’re using CSS transitions along with a :hover change on the div and a :hover change on the p.

    Why not target the p when you hover over the div instead of relying on a separate hover over p (e.g. div:hover p {margin: whatever})?

    #89029
    Brightonmike
    Member

    Change:

    .featured_text p:hover {transition:all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; margin-right:430px;}

    to

    .featured_text:hover p{transition:all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; margin-right:430px;}

    ???

    #89030
    Brightonmike
    Member

    Or

    .features:hover p {transition:all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; margin-right:430px;}
    #89031
    ricnunes
    Member

    That’s it! worked perfectly… How come I forgot about this?? :S

    Thank you so much!!! My life can carry on now lol

    In the end, it I’ve made this:

    .features .grid_12:hover p{
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin-right:430px;}

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.