Difficulty with the .Hover / .Mouseover commands functioning. [Code Review]

**Polcat** · Aug 22, 2012 13:04

Hello!

I am having trouble figuring out how to get my Hover command to function properly. I might not have it in the correct area, or the code may not be correct. either way here is the code: The section that I am having trouble with is the "$('#dyo " section. Thanks!

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Cake Kiosk</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script> $(document).ready(function(){
  alert('Welcome to Cake Kiosks! Thank you for choosing your local Kiosk.  I will be your Virtual Decorator today! Please choose Create Your Own, or Current Designs on the following page and we can get started!');
});</script>

<script> 
$(document).ready(function(){
  $('#dyo tbody tr').addClass('zebra');
  $('#dyo tbody tr').hover(function(){
    $(this).addClass('zebraHover');
  }, function(){
    $(this).removeClass('zebraHover');
  });
});
</script>


</head>

<body>

<table class="cakes" id="choices" width="100%" border="2" cellspacing="2" cellpadding="2" bgcolor="#0066FF">
  <tr>
    <td colspan="2" align="center">The Cake Kiosk</td>
   
  </tr>
  <tr>
    <td align="center" id="dyo"> Design Your Own</td>
    <td align="center" id="cd">Current Designs</td>
  </tr>
  <tr>
    <td align="center">Java Script Code Left</td>
    <td align="center">Java Script Code Right</td>
  </tr>
  <tr>
  	<td align="center" colspan="2"> Witbeck's Family Foods: 1026 N. McEwan Clare, MI 48617</td>  </tr>
   <tr>
    <td align="center" colspan="2">Developed by Kiosks for Cakes</td>
   
  </tr>
</table>

</body>
</html>

**designforce24** · Aug 22, 2012 15:52

its working fine:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script> $(document).ready(function(){
  alert('Welcome to Cake Kiosks! Thank you for choosing your local Kiosk.  I will be your Virtual Decorator today! Please choose Create Your Own, or Current Designs on the following page and we can get started!');
});</script>
<style type="text/css">
.zebra { background:red;}
.zebraHover { background:yellow}
</style>
<script> 
$(document).ready(function(){
  $('#dyo').addClass('zebra');
  $('#dyo').hover(function(){
    $(this).addClass('zebraHover');
  }, function(){
    $(this).removeClass('zebraHover');
  });
});
</script>


</head>

<body>

<table class="cakes" id="choices" width="100%" border="2" cellspacing="2" cellpadding="2" bgcolor="#0066FF">
  <tr>
    <td colspan="2" align="center">The Cake Kiosk</td>
   
  </tr>
  <tr>
    <td align="center" id="dyo"> Design Your Own</td>
    <td align="center" id="cd">Current Designs</td>
  </tr>
  <tr>
    <td align="center">Java Script Code Left</td>
    <td align="center">Java Script Code Right</td>
  </tr>
  <tr>
  	<td align="center" colspan="2"> Witbeck's Family Foods: 1026 N. McEwan Clare, MI 48617</td>  </tr>
   <tr>
    <td align="center" colspan="2">Developed by Kiosks for Cakes</td>
   
  </tr>
</table>

</body>
</html>

when you have id="dyo" then you dont need $('#dyo tbody tr').addClass('zebra');
#dyo is a td and child of tbody and tr. Easiest solution is to select the element direct with id.

**chris.upjohn** · Aug 22, 2012 16:09

Your code isn't going to work because you don't have a nested tbody and tr within your #dyo element, all you need to target is the #dyo element itself and it will work fine.

Code JavaScript:

$(function() {
    $('#dyo').addClass('zebra').hover(function() {
        $(this).addClass('zebraHover');
    }, function() {
        $(this).removeClass('zebraHover');
    });
});

**Polcat** · Aug 23, 2012 08:58

And the Code that you posted in your post is what I will need to insert into the <script> tags in order for this to work? the difference being that I already have an item to target and the code that I am using is attempting to create a target?
Because I already have a target, the code does not need to create one, therefore I can leave that aspect out of the code?

User Tag List

Thread: Difficulty with the .Hover / .Mouseover commands functioning. [Code Review]

Thread Tools

Display

Hybrid View

Difficulty with the .Hover / .Mouseover commands functioning. [Code Review]

Bookmarks

Bookmarks

Posting Permissions