help with show/hide text on hover

help with show/hide text on hover

I am not sure the best or most elegant way to do this. What I am trying now isn't working. Essentially, I have a horizontal row of icons and when a user hovers over the icons I want text to display in a div to the right of the icons with the text being unique per each icon.

My solution isn't very elegant (and doesn't work), because for each icon I would need to write a separate function, and also a separate paragraph ID, so I am hoping for suggestions to a better solution.

Here is what I have attempted:

  2. //JQuery
  3. (function($){
  4. $(document).ready(function(){
  5. $(".btn-theme_all").hover(function() {$("p#AllText").toggle();
  6. });
  7. })(jQuery);

  9. //HTML
  11. <ul>
  12.                               <li><a href="#" class="btn-theme_all" data-filter="*">ALL</a></li>
  13.                               <li><a href="#" class="btn-theme_web" data-filter=".webdesign"></a></li>
  14.                               <li><a href="#" class="btn-theme_writing" data-filter=".writing"></a></li>
  15.                               <li ><a href="#" class="btn-theme_sandbox" data-filter=".sandbox"></a></li>
  16.                             </ul>
  17.                           </nav>
  18. <div id="PortfolioInfo"><p id="AllText">All of my portfolio including web, writing and sandbox</p></div>



  22. //CSS
  24. #PortfolioInfo{
  25. background-color:#eee;
  26. text=align:center;
  27. padding:10px;
  28. width:250px;
  29. height:250px;
  30. color:#333;
  31. font-weight:bold;
  32. border:3px solid #ccc;
  33. position:absolute;
  34. right:0;
  35. border-radius:5px;
  36. margin-right:50px;
  37. }

  39. p#AllText{
  40. display:none;
  41. }