Re: [css-d] CSS mouseover?
Hey one and all, I was wondering ifm with css, it is possible to create the kind of effect that I have made here [ www.amici-noctis.net ] whereby I can create a layer, and once it is moved over by the mouse it will hide the default layer and display a series of divs with content , links and images. I know from various sites that this is indeed possible, with image swapping and all that but it is the multiple divs with seperate styles that I am wondering about. The example above was done using very very basic java mixed with css, and as can be seen it is a very very crude method, with massive problems when the mouse moves between divs. I was hoping some of you guys could point me in the right direction with this as I would sorely love be able recreate this effect using nothing but css. For CSS2 compliant browsers you could do that in CSS, as they allow a hover over all elements. For MSIE6 it isn't possible with CSS. To be on the safe side it does make sense to do it with JavaScript (which has nothing to do with Java apart from the name). Your JavaScript does not take event bubbling into consideration and flickers when you hover over the links. You can easily fix that, but that solution is for another mailing list. The other thing you might want to think about is keyboard access. Now there is no chance to reach the content unless you hover over it, which is a bit old school in terms of web design IMHO. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS mouseover?
David wondered: ifm with css, it is possible to create the kind of effect that I have made here [ www.amici-noctis.net ] whereby I can create a layer, and once it is moved over by the mouse it will hide the default layer and display a series of divs with content , links and images. I know from various sites that this is indeed possible, with image swapping and all that but it is the multiple divs with seperate styles that I am wondering about. David, did you intend for the hidden layers to remain hidden, or re-appear? By the time I hovered over each of the three columns, the entire screen was black, with the exception of the widgets. Dave Pierce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS mouseover?
oops...I was using Safari. Dave __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS mouseover to look like buttons
Many times when you add a border onmouseover, it's adding something that wasn't there before. Give the item a margin of the border width, then take the margin away and replace it with a border on mouseover. Alex Foley Portman wrote: Hi all, I am changing a JavaScript menu to CSS for the mouseover and wanted to make it look like it was still a button that depresses on mouseover. I tried fiddling with adding a border on mouseover (the same color as the background) but it moves all the links, not just the one I am hovering over. Any ideas/help would be much appreciated. Thanks, Riva http://www.starqualitydesigns.com/BestHealth/newmenuindex.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS mouseover to look like buttons
At 09:37 AM 7/18/2006, Portman wrote: I am changing a JavaScript menu to CSS for the mouseover and wanted to make it look like it was still a button that depresses on mouseover. I tried fiddling with adding a border on mouseover (the same color as the background) but it moves all the links, not just the one I am hovering over. Any ideas/help would be much appreciated. Generally speaking, the trick is to not add any new dimension to your objects on hover but to change the appearance of already-existing properties so that the overall dimensions of each menu item remain the same. For example: - change border color. - swap dimensions of thin left thick right borders so that the whole block retains its width. - swap margin or padding for border. - swap background image on hover (CSS background properties will never affect the size shape of the block). By the way, are you sure you want to make the buttons look depressed when you mouse over them? That doesn't really mimic any real-world object behavior, which is what web page buttons set out originally to do. If a button presses in when you hover over it, does that mean it doesn't react further when you click it? That seems like a user interface glitch to me. I'd consider a three-state menu in which button faces gleam or brighten on hover and depress when clicked. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
