0

I have a table and I want to assign a css hover to all its cells. But at the same time I have a div tag with a bg image and it has the same width and height as the table and its being positioned right on top of the table with position relative. How can I still assign the css hover to the cells of the table, because when I try it, it doesn't work, and I think it's because when I it's detecting the div tag...

Does anyone know the solution to this?

NOTE: it has to work with IE9 (can't use css3 either)

omega
  • 40,311
  • 81
  • 251
  • 474
  • $('table td').click(function(){ alert('worked!')}) - is this working? – Rustam Kichinsky Oct 22 '12 at 03:03
  • try to set a class for all the cells and then try $('.classNameOfCell').click(function(){alert(555);}) – Rustam Kichinsky Oct 22 '12 at 03:28
  • Seems like you should be using a [map element](http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#the-map-element) instead of a div and table. I've referenced HTML5, but map elements have been around forever. Haven't suggested this as an answer as it doesn't use any jQuery (or even script or CSS). Pure HTML. – RobG Oct 22 '12 at 03:29
  • sorry, I need to change the question. See above again – omega Oct 22 '12 at 03:35

2 Answers2

4

check this post

It can be done using CSS pointer-events in Firefox >= 3.6 and Safari >= 4.0. Probably some Chrome version too. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}
Community
  • 1
  • 1
fin
  • 1,299
  • 1
  • 10
  • 20
  • it's not working for me. overlay is the id of the div tag right? – omega Oct 22 '12 at 03:26
  • Would that be better than a map element? – RobG Oct 22 '12 at 03:31
  • sorry, I need to change the question. See above again – omega Oct 22 '12 at 03:36
  • did you check the javascript solution link above? it supports ie9 – fin Oct 22 '12 at 03:40
  • @RobG it depends on the situation, map element is a solution but there may be times when map element doesn't fit in (eg: if the under layer is fetched from other sites) – fin Oct 22 '12 at 03:42
  • @fin—the OP is covering a table with an image, that is essentially an image map with a regular grid of areas. They are supported by every browser back to about IE 4 equivalent. – RobG Oct 22 '12 at 04:29
0

There are 2 solutions:
1-Use the following code:

<td  onmouseover="className='tdon'" onmouseout="className='tdoff'"></td>

then write tdon and tdoff classes in css.

2- Use jQuery $("td").hover(function() {});

pardis kermanshahi
  • 1
  • 2