L.Adlon Posted June 22, 2014 Share Posted June 22, 2014 Hi, guys. I'm wondering if there's an easy way to have text appear (preferably in a different location) when a hyperlink gets a hover event. Basically, a sort of tooltip, but locked to the screen (in some spot on the screen), rather than the pointer. Can that be done with CSS, without having to resort to javascript or anything complex? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2014 Share Posted June 23, 2014 The element which holds the text has to be a child or sibling of the element hovered over, then you could use position: absolute; to position this child away from this hovered over element, but depends on what you are actually looking for, as it may not be ideal in some situations. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 23, 2014 Author Share Posted June 23, 2014 (edited) Hrmmm...I'm not familiar with parenting yet. Does that just mean it's within another element (nested)? I tried having text in the <div>, setting it to invisible, and then setting it to visible using a hover event... but it seems that making something invisible also makes the area of the div stretch to the entire screen, and essentially not exist (as opposed to just being invisible)... so, the hover didn't work then. Strange, but that's how it is supposed to work. Otherwise, that might have been a solution to that. Could I trouble you for some sample code of the technique you are explaining? I'm curious how it would be done. Basically anything that would cause an element (graphic or text) to become visible during a mouseover/hover (or appear, one way or another... maybe having it go from offscreen to onscreen? Edited June 23, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2014 Share Posted June 23, 2014 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .test_parent1, .sibling_wrap {position: relative;} .sibling_wrap {width: 750px; background-color: #6633FF;} .test_parent1, .test_sibling1 { height: 500px; width: 500px; background-color: #3cf; margin: 15px;} .test_parent1 div, .test_sibling1 + div {position: absolute; top: 50%; left: 150%; display: none; background-color: #e0c589; height: 200px; width: 200px;} .test_parent1:hover div, .test_sibling1:hover + div {display: block; } </style> </head> <body> <div class="test_parent1">parent using position relative;<div>this parent child position is relative to outside edges of parent (150% 1 and half times the width parent .test_parent1 )</div></div> <div class="sibling_wrap">Sibling wrap using position relative; <div class="test_sibling1">this sibling is used to apply hover to show sibling</div> <div>this sibling child position is relative to outside edges of sibling_wrap, (150% 1 and half times the width parent .sibling_wrap)</div> </div> </body></html> Link to comment Share on other sites More sharing options...
L.Adlon Posted June 23, 2014 Author Share Posted June 23, 2014 Cool. I'll trinker around with that, and try and figure it all out. Thanks! Link to comment Share on other sites More sharing options...
bigzer Posted June 29, 2014 Share Posted June 29, 2014 Geat, thanks for the help I'll give it a shot as well 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