CODEWITHSUNDEEP
jqueryrollovers
user2822467
user2822467

Reputation: 17

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

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>

Upvotes: 0

Views: 87

Answers (3)

Philip Giuliani
Philip Giuliani

Reputation: 1366

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>

Upvotes: 0

Ashis Kumar
Ashis Kumar

Reputation: 6544

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/

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

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; 
}

Upvotes: 0

Related Questions