Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Mouseover

Posted on 2002-06-21
4
Medium Priority
?
321 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 200 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

704 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