javascript - hover on table to change another element style with jquery, works for only 1 mil second -

i want text underlined when hovering area of table.

here's code, works 1 mil second , underline fades away though cursor inside table (tried both go , foo test):

js:

<script> $(document).ready(function(){ $(function(){     $('.foo').mouseenter(function(){         $(".vvv").addclass('altbg')     }).mouseout(function(){         $(".vvv").removeclass('altbg')     }); }); }) </script> 

css:

.altbg {     text-decoration:underline; } 

html:

<div class="go"> <table border="1" class="foo">         <col style="width:115px;" />         <col style="width:280px;" />         <col style="width:125px;" />         <col style="width:145px;" />         <col style="width:125px;" />         <col style="width:230px;" />           <tr>             <td>0</td>             <td>1</td>             <td>2</td>             <td>3</td>             <td>4</td>             <td>5</td>           </tr></table> </div> <div class="vvv">hello</div>   

edit: second related question:

i want text color change when hovering table, though color defined id.

besides changing id class, how can make div change it's color?

maybe in script needs change in order specify class selector, don't know how it.

js:

<script> $(document).ready(function(){ $(function(){     $('td').mouseenter(function(){         $(".vvv").addclass('altbg')     }).mouseout(function(){         $(".vvv").removeclass('altbg')     }); }); }) </script> 

css:

#meh {color:red}  .altbg {     text-decoration:underline;     color:blue; } 

html:

<div class="go"> <table border="1" class="foo">         <col style="width:115px;" />         <col style="width:280px;" />         <col style="width:125px;" />         <col style="width:145px;" />         <col style="width:125px;" />         <col style="width:230px;" />           <tr>             <td>0</td>             <td>1</td>             <td>2</td>             <td>3</td>             <td>4</td>             <td>5</td>           </tr></table> </div> <div id="meh" class="vvv">hello</div>     

it's not time of hover, location of mouse makes not appear longer. reason targeting table's class not work, instead have target td element inside of it:

$(document).ready(function () {      $(function () {          $('td').mouseenter(function () {              $(".vvv").addclass('altbg')          }).mouseout(function () {              $(".vvv").removeclass('altbg')          });      });  })

.altbg {      text-decoration:underline;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="go">      <table border="1" class="foo">          <col style="width:115px;" />          <col style="width:280px;" />          <col style="width:125px;" />          <col style="width:145px;" />          <col style="width:125px;" />          <col style="width:230px;" />          <tr>              <td>0</td>              <td>1</td>              <td>2</td>              <td>3</td>              <td>4</td>              <td>5</td>          </tr>      </table>  </div>  <div class="vvv">hello</div>

here jsfiddle demo: http://jsfiddle.net/0uqboeat/ too.