Solved

Mouseover

Posted on 2002-06-21
4
297 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:curtis591
  • 2
4 Comments
 
LVL 10

Expert Comment

by:dij8
ID: 7099712
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
 
LVL 10

Expert Comment

by:dij8
ID: 7099729
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
 
LVL 18

Expert Comment

by:bruno
ID: 7100533
dij8,

that WILL work in the future....at least it should...when the browsers support it....
0
 
LVL 17

Accepted Solution

by:
dorward earned 50 total points
ID: 7100575
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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now