title: Javascript sending dynamic values to CSS
body: <p>I'm using Jquery and im having trouble updating my CSS value on the fly during a hover event  . Basically i want that little line at the bottom to scale to the scale in length to the size of the div.</p>
  
  <p>Here is the problematic code in question:</p>
  
  <pre><code>$('.menu li').hover(function () {
     left = Math.round($(this).offset().left - $('.menu').offset().left);
     //find the current width of the div
     var width_flux = $('.menu #box .head').html($(this).find('img').width());
     //pass value to CSS 
     $('.menu #box .head').css('width', (parseInt(width_flux)) +'px');
     $('#box').stop(false, true).animate({left: left},{duration:500, easing: style}); 
  
     //if user click on the menu
  });
  </code></pre>
  
  <p><strong>and the corresponding css</strong></p>
  
  <hr>
  
  <pre><code>.menu #box .head {
          background: url("http://whoisedward.com/img/bar.png");
          height:3px;
          width:1px;
          color:#eee;
  
          /* force text display in one line */
          white-space:nowrap;
  
          /* set the text position manually */
          padding-left:4px;
          padding-top:3px;
      }
  </code></pre>