I am new to JQuery and I am trying to create a roll over effect, with the intention of doing this for links.

Question

Also give tips as to how to create the links would it just be A etc Also is there any more common JQuery commands that I should learn to begin with. Need pointing in the right direction a little.

Thanks

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <style> 
      table, th, td  {
        border: 1px solid black; 
      }

      tr.nice td {
        background: #FAFAD2; 
      }

      tr.mouseon td {
        background: #1E90FF; 
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type ="text/javascript"> 
      $("table1 tr).addClass("nice); 
      $("#table1 th").mouseover(function() { $(this).addClass("mouseon"); 
      $("#table1 th").mouseout(function() {  $(this).removeClass("mouseon"); 
    </script>
  </head>
  <body>
    <div id="table1">
      <table>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
        </tr>
          <tr>
            <td>A1</td>
            <td>B1</td>
          </tr>
      </table>
    </div>
  </body>
</html>

You don't need jquery for rollover effects, `a:hover` does it for you. As for pointing in the right direction i suggest you give **[this](https://tutsplus.com/course/30-days-to-learn-jquery/)** a look. — Patsy Issa, Sep 27 '13 at 07:40
possible duplicate of [How do I check if the mouse is over an element in jQuery?](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery) — Anobik, Sep 27 '13 at 07:56

Ashis Kumar · Answer 1 · 2013-09-27T07:51:17.407

1

I guess you don't need jquery for this, simple css can do the trick. Just as Patsy Issa said, just use css :hover instead.

tr th:hover {
    background: #1E90FF; 
}

Check this http://jsfiddle.net/PbJmB/1/

edited Sep 27 '13 at 07:51

answered Sep 27 '13 at 07:45

Ashis Kumar

6,494
2
21
36

Philip Giuliani · Answer 2 · 2013-09-27T07:51:40.283

you have a lot of errors with missing " and ( ). You should use a Editor with Syntax-Highlighting like Notepad++ or Dreamweaver. I posted 2 methods to do this.

Your script tag is wrong. Fixed:

<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Method #1

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").on("mouseover", function() {
    $(this).addClass("mouseon");
  }); 
  $("#table1 th").on("mouseout", function() { 
    $(this).removeClass("mouseon");
  });
});
</script>

Method #2

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").hover(function() {
    // mouseON
    $(this).addClass("mouseon");
  }, function(){
    // mouseOUT
    $(this).removeClass("mouseon");
  }); 
});
</script>

Simple

You could also do it with CSS:

<style type="text/css">
#table1 th {
   background: black; /* standart bg */
}
#table1 th:hover {
   background: red /* new bg */
}
</style>

score 0 · Answer 3 · answered Sep 27 '13 at 07:49

You need following changes to script and CSS:

SCRIPT :

$(document).ready(function(){
$("#table1 table tr").addClass("nice"); 
$("#table1 th").hover(function() { 
    $(this).addClass("mouseon"); 
},
    function() {
        $(this).removeClass("mouseon"); 
    });
});

CSS:

table, th, td  {
    border: 1px solid black; 
}

tr.nice td {
    background:  #FAFAD2; 
}

.mouseon {
    background: #1E90FF; 
}

I am new to JQuery and I am trying to create a roll over effect, with the intention of doing this for links.

3 Answers3