Mouseover

I have a bunch of cells where I have to do the same mouseover and mouseout events.  Is there a way using style sheets that I can only have my mouseout and over code once.
LVL 6
curtis591Asked:
Who is Participating?
 
dorwardCommented:
Assuming that the mouse over effect is becuase the cells are links:

#myTable a {
  display: block;
  width: 100%;
  height: 100%;
  color: black;
  vertical-align: middle;
  text-align: center;
}

#myTable a:link {
 background-color: #aaa;
}

#myTable a:visited {
 background-color: #faa;
}

#myTable a:hover {
 background-color: #afa;
}

#myTable a:active {
 background-color: #aaf;
}

with:

<table id="myTable">
<tr><td><a href="foo">link</a></td></tr>
<tr><td><a href="foo">link</a></td></tr>
<tr><td><a href="foo">link</a></td></tr>
<tr><td><a href="foo">link</a></td></tr>
</table>

and edit any values to suit your needs.
0
 
dij8Commented:
If you are applying styles on a mouseover event then yes you can do it in one go.  <td class="classname">stuff</td>

.classname {
  style;
}
.classname:hover {
  different style;
}

This will not work in Netscape.  But a mouseover event will not work in Netscape when used in a <td> tag either.  So I will assume you are coding only for IE anyway.

If you are trying to activate a function then no, styles do not run functions.
0
 
dij8Commented:
The classname:hover thing doesn't work.  I guess I should have tested first.  You will need a mouseover and mouseout event.  But if you are after a function that comment still stands true.  You can't do it using styles.
0
 
brunoCommented:
dij8,

that WILL work in the future....at least it should...when the browsers support it....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.