niche Posted May 10, 2012 Share Posted May 10, 2012 (edited) I have a script for two hovers. How do I keep the "Company Hover" from displacing the "Item Button" (ie how do I keep the button from jumping around)? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><?php session_start(); ?><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><style type="text/css">.button {padding:0px;width:82px;height:40px;vertical-align:top;}.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;display:none;border-style:solid;border-width:4px;}.button2 {padding:0px;width:82px;height:40px;vertical-align:top;}.message2 {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;display:none;border-style:solid;border-width:4px;}button.button:hover + div.message {display:block;}button.button2:hover + div.message2 {display:block;}</style></head><body><button class="button" id="a1" >Company Info</button><div class="message" id="a2">This company.</div> <button class="button2" id="b1" >Item Info</button><div class="message2" id="b2">This item.</div> </body></html> Edited May 11, 2012 by niche Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2012 Share Posted May 11, 2012 probably better to use visibility rather than display. .button {padding:0px;width:82px;height:40px;vertical-align:top;}.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button2 {padding:0px;width:82px;height:40px;vertical-align:top;}.message2 {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button_cont {float:left; text-align:center;}button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;} <div class="button_cont"><button class="button" id="a1" >Company Info</button><div class="message" id="a2">This company.</div></div><div class="button_cont"><button class="button2" id="b1" >Item Info</button><div class="message2" id="b2">This item.</div></div> 1 Link to comment Share on other sites More sharing options...
niche Posted May 11, 2012 Author Share Posted May 11, 2012 (edited) Point of information: I have no idea what happened to my first post. I'll use your suggestions . I also found changing the order of the code corrected the immediate problem. to this: <?phpecho '<button class="button" >Item <br/>Info</button>'; echo '<button class="button2" >Company Info</button>';echo '<div class="message">Item Info</div>';echo '<div class="message2">Company Info</div>';?> from this: <?phpecho '<button class="button" >Item <br/>Info</button>';echo '<div class="message">Item Info</div>'; echo '<button class="button2" >Company Info</button>';echo '<div class="message2">Company Info</div>';?> Thank-you for your dsonesuk. Edited May 11, 2012 by niche Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2012 Share Posted May 11, 2012 I'll use your suggestions . I also found changing the order of the code corrected the immediate problem. to this: <?phpecho '<button class="button" >Item <br/>Info</button>'; echo '<button class="button2" >Company Info</button>';echo '<div class="message">Item Info</div>';echo '<div class="message2">Company Info</div>';?> button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;} Actually this should not work with '+' as it targets the very next div element, it does not care if it has class or id ref, you would have to use '~' instead. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now