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

[ricnunes]

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 :)

[thomas]

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})?

[Brightonmike]

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

???

[Brightonmike]

Or

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

[ricnunes]

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

[Author]

Posts