- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I basically have a header with a background color that stretches vertically infinitely in it’s parent’s container that I want to shrink when hovered over. I’m having trouble getting the desired effect ─ when I hover over the header, it shrinks but aligns to the left. How do I get the background color to shrink without de-centering the header?
Here’s an example in JSFiddle: http://jsfiddle.net/Catasphere/LdSHB/
Thank you! It works! But there’s a defect, I don’t know if it’s just because of my browser/setup, but after I move my cursor off the element, it snaps to the left and then centers again… is there a way to remove that?
Here’s a demo: http://cl.ly/320I3r2g421I2x2X1m0f
( Excuse the audio in the demo, I didn’t know it was recording my music :P )
Yeah sure! It’s just a demo, but here’s what I have so far.
HTML: http://cl.ly/1Y210P2v2z3f0u3j0000
CSS: http://cl.ly/1k30451i3d1z1q230w1F
Reset: http://cl.ly/3z2b1D0r0P2L2m3J2E34
Bump!
What browser are you using? @stevencrader’s solution is the correct one, I can’t replicate your issue with it.
I’m using Firefox 8. I’ve replicated it with Chrome and Safari, though… This is weird.
Ok, try this instead, apply the effect directly to the h1 element. It is block level by nature (100% width). Here is the fiddle: http://jsfiddle.net/sl1dr/DcR7E/
That killed the bug! Thank you! So it’s more effective to target the h1 element instead of the whole header wrapper?
Well you were essentially targeting (and styling) a wrapper element. It makes much more sense to target the element directly.