[css-d] Is there an alternative way of doing this?
http://appia.dramatic.co.nz/~admin7/index.php is attempting to use a hover effect on the left-hand column where the background image changes from monochrome to colour. I can't use a traditional 2 images in 1 sprite because you cannot position a background image in pixels relative to the right-hand side of a box. SO I have the coloured image as the background to the main wrapper div and hovering the div #colleft switches the position of colleft's background from right to left (= out of sight). However, the hover is also triggering on the main column, presumably because this is a child of #colleft, even though is is positioned entirely to the right of it (the blue border exists for debugging only). is there any way to cancel the hover for .col1? or can anyone see an alternative method. (I can't use col2 as that is not full-height). I considered using a vertical sprite, but there would be some length of page for which that would look ugly, and it would presumably siffer from exactly the same triggering issue. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is there an alternative way of doing this?
http://appia.dramatic.co.nz/~admin7/index.php is attempting to use a hover effect on the left-hand column where the background image changes from monochrome to colour. I can't use a traditional 2 images in 1 sprite because you cannot position a background image in pixels relative to the right-hand side of a box. SO I have the coloured image as the background to the main wrapper div and hovering the div #colleft switches the position of colleft's background from right to left (= out of sight). However, the hover is also triggering on the main column, presumably because this is a child of #colleft, even though is is positioned entirely to the right of it (the blue border exists for debugging only). is there any way to cancel the hover for .col1? or can anyone see an alternative method. (I can't use col2 as that is not full-height). I considered using a vertical sprite, but there would be some length of page for which that would look ugly, and it would presumably siffer from exactly the same triggering issue. Richard: I'm not sure what you're doing, but I am thinking you're making this more difficult than it should be. Here's something that looks difficult, but isn't. http://sperling.com/examples/image-replacement/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is there an alternative way of doing this?
On Mon, Feb 2, 2009 at 2:05 PM, tedd tedd.sperl...@gmail.com wrote: http://appia.dramatic.co.nz/~admin7/index.php is attempting to use a hover effect on the left-hand column where the background image changes from monochrome to colour. I can't use a traditional 2 images in 1 sprite because you cannot position a background image in pixels relative to the right-hand side of a box. SO I have the coloured image as the background to the main wrapper div and hovering the div #colleft switches the position of colleft's background from right to left (= out of sight). However, the hover is also triggering on the main column, presumably because this is a child of #colleft, even though is is positioned entirely to the right of it (the blue border exists for debugging only). is there any way to cancel the hover for .col1? or can anyone see an alternative method. (I can't use col2 as that is not full-height). I considered using a vertical sprite, but there would be some length of page for which that would look ugly, and it would presumably siffer from exactly the same triggering issue. Richard: I'm not sure what you're doing, but I am thinking you're making this more difficult than it should be. Here's something that looks difficult, but isn't. http://sperling.com/examples/image-replacement/ Hi Tedd, your method demonstrates why the sprite technique was invented in the first place. In IE, I see a 7 second delay while the second image loads, since IE doesn't preload resourced defined in :hover -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
