Jump to content

Show more text when hover?


Harris
 Share

Recommended Posts

Of course it's possible. Anything is possible if you try hard enough. ^_^ There are two main ways it can be done: one with pure CSS and one with JavaScript. Google "CSS tooltips" or "JavaScript tooltips" (depending on which one you want to use) and you should find a good number of tutorials. The advantage to the CSS method is that it will work in all browsers under pretty much any circumstances, whereas the JavaScript method obviously will not work if JavaScript is disabled. The disadvantage to the CSS method is that it's going to produce more markup but that's not really that big of an issue because the effect is pretty minimal unless you're making thousands of tooltips.

Link to comment
Share on other sites

how about...

<style>li {background-color:blue;background-image:url('http://www.mars.com/cis/ru/assets/images/layout/flexBox_white_topLeft.jpg');background-position:center right;background-repeat:no-repeat;background-size:20px 20px;color:white;list-style-type:none;width:120px;}li:hover {background-color:#00a;background-image:url('http://www.oasis-open.org/docbook/xmlcharent/glyphs/100dpi/U003C.png');background-size:20px 20px;color:yellow;}</style> <ul><li>Main</li><li>More</li><li>Ending</li></ul> 

Ive used 2 images for background from google search. Empty white and "<" arrow. OrYou can just write "<span><</span>' andli span {color:white;}li:hover span {color:black;}but thats no good cuz your changing content for design (what is wrong)

Edited by es131245
Link to comment
Share on other sites

Yeah, I totally forgot about using background images. :facepalm: That would be the best option, especially if you use sprites. EDIT: But then again, that only works if you want the arrow inside the li. The options I gave you would allow it to appear outside of it.

Edited by ShadowMage
Link to comment
Share on other sites

Bit confused if you want text or arrow, if text place text in span, if arrow image of some sort define height/width and use background-image in span(remove span content, and leave it empty).

#left_nav {width:190px; }#left_nav a {background-color:#0033FF; color: #fff; display:block;height:100%; line-height:46px; font-size:36px; text-decoration:none;}#left_nav a:hover {background-color:#000099; color:#FFFF66;}#left_nav a:hover span {left:auto; right: -100px;}#left_nav a span {position:absolute; top:0; left:-99999em; color:#000; display:block;}#left_nav ul, #left_nav li{padding:0; margin:0; text-indent:0; list-style-type:none;} #left_nav li {height:46px; text-indent:10px; position:relative;}

<div id="left_nav"><ul><li><a href="#">Home<span>←</span></a></li><li><a href="#">Forum<span>←</span></a></li><li><a href="#">News<span>←</span></a></li><li><a href="#">Register<span>←</span></a></li><li><a href="#">About<span>←</span></a></li></ul></div>

Edited by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...