s_ff_da_b_ff Posted July 15, 2008 Share Posted July 15, 2008 So I'm new to JS and have the following code: <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("li").hover( function () { $(this).append($("<span>Info</span>")); }, function () { $(this).find("span:last").remove(); } ); }); </script> <style> ul { margin-left:20px; color:blue; } li { cursor:default; } span { color:red; } </style> </head> <body> <ul> <li>Name1</li> <li>Name2</li> <li>Name3</li> <li>Name4</li> </ul> </body> ----------------------------------------- Now I want to be able to hover over a particular name and have a div box with whatever I choose in it. Can I just use CSS within the <span></span> tags ? Or am I not even close to what I am looking to do. Thanks. Quote Link to comment Share on other sites More sharing options...
adam84 Posted July 15, 2008 Share Posted July 15, 2008 Doing it with javascript <SCRIPT> function changeText( name ){ document.getElementById('nameDIV').innerHTML = name; } </SCRIPT> <body> <DIV NAME=nameDIV ID=nameDIV></DIV> <ul> <li ONMOUSEOVER=javascript:changeText('Larry')>Larry</li> <li ONMOUSEOVER=javascript:changeText('Debra')>Debra</li> </ul> Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted July 15, 2008 Share Posted July 15, 2008 So I'm new to JS and have the following code: <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("li").hover( function () { $(this).append($("<span>Info</span>")); }, function () { $(this).find("span:last").remove(); } ); }); </script> <style> ul { margin-left:20px; color:blue; } li { cursor:default; } span { color:red; } </style> </head> <body> <ul> <li>Name1</li> <li>Name2</li> <li>Name3</li> <li>Name4</li> </ul> </body> ----------------------------------------- Now I want to be able to hover over a particular name and have a div box with whatever I choose in it. Can I just use CSS within the <span></span> tags ? Or am I not even close to what I am looking to do. Thanks. What do you mean by "Can I just use CSS within the <span></span> tags?" In any event, you are close. You'll need to use the text() function in order to obtain the text from the list elements so you can put it in the span/div you want. Quote Link to comment Share on other sites More sharing options...
s_ff_da_b_ff Posted July 15, 2008 Author Share Posted July 15, 2008 Thanks Ill try the code later. WIth "Can I just use CSS in the <span> tags" I mean -- is it within the span tags that I can put my CSS code to create the look I want in the pop out box or is there another element im missing Quote Link to comment Share on other sites More sharing options...
s_ff_da_b_ff Posted July 15, 2008 Author Share Posted July 15, 2008 Doing it with javascript <SCRIPT> function changeText( name ){ document.getElementById('nameDIV').innerHTML = name; } </SCRIPT> <body> <DIV NAME=nameDIV ID=nameDIV></DIV> <ul> <li ONMOUSEOVER=javascript:changeText('Larry')>Larry</li> <li ONMOUSEOVER=javascript:changeText('Debra')>Debra</li> </ul> This isnt what Im looking for per say. Sorry. Run the code I posted for a better feel of what I am looking for. Any other help?? Quote Link to comment Share on other sites More sharing options...
s_ff_da_b_ff Posted July 17, 2008 Author Share Posted July 17, 2008 bump Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted July 17, 2008 Share Posted July 17, 2008 Thanks Ill try the code later. WIth "Can I just use CSS in the <span> tags" I mean -- is it within the span tags that I can put my CSS code to create the look I want in the pop out box or is there another element im missing Well, you have to remember that a <span> is an inline element. To create a box for a tooltip, you're better off by using a <div>, which is a block element. But yeah, a CSS styled <div> should be what you're looking for. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.