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. Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/ 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> Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-590468 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. Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-590535 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 Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-590639 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?? Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-590664 Share on other sites More sharing options...
s_ff_da_b_ff Posted July 17, 2008 Author Share Posted July 17, 2008 bump Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-592452 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. Link to comment https://forums.phpfreaks.com/topic/114773-js-hover-help/#findComment-592461 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.