banzemanga Posted April 17, 2008 Share Posted April 17, 2008 What i want is to use css to simulate the properties of a styled anchor to any other element. (without using javascript)So let's say i have a anchor inside a table cell and when i hover it:-like a block the background color changes-the mouse becomes a hand pointer <html> <head> <style type=text/css> .mouseOver { background-color: #999999; cursor: pointer; display: block; } a { display: block; } a:hover { background-color: #999999; } table { border: solid thin; } td { width: 50pt; } </style> </head> <body> <table> <tbody> <tr> <td><a href="#">three</a></td> <td class="mouseOver">two</td> </tr> </tbody> </table> </body></html> So here i have a table with 2 cells.-The first one is the anchor i am trying to simulate-The second is a cell with class "mouseOver"So what do i do so all elements of class "mouseOver" will take simulation only when the mouse is over the styled element.I know i could use javascript ad add a onmouseover to change the style but i don't want that. I want to do it with pure css. Any ideas? Link to comment Share on other sites More sharing options...
Ingolme Posted April 17, 2008 Share Posted April 17, 2008 This class with simulate a link to anything you apply them to:.mouseOver:hover {color: blue;text-decoration: underline;cursor: pointer;} Link to comment Share on other sites More sharing options...
banzemanga Posted April 17, 2008 Author Share Posted April 17, 2008 I tried that before. For some reason the 'hover' pseudo-class only applies to anchors. I wonder if there is any other way to do it besides using pseudo-classes and javascript.Edit: i looks like that the problem was that it is not fully supported by browsers. Firefox accepts the hover pseudo-class if i add what kind of element before it:td.mouseOver:hover { background-color: #999999; cursor: pointer; display: block;}But IE doesn't seem to accept hover pseudo-class at all.Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted April 17, 2008 Share Posted April 17, 2008 Internet Explorer 6 only will use the :hover pseudo-class on an <a> element.Firefox shouldn't have a problem with :hover no matter the circumstance. Link to comment Share on other sites More sharing options...
banzemanga Posted April 17, 2008 Author Share Posted April 17, 2008 Hm... after reading your post i tried again and i still get the same results i said. What version of Firefox do you use? I use 2.0.0.13.IE7 doesn't render it at all. Firefox only takes it when i include the tag. Link to comment Share on other sites More sharing options...
Synook Posted April 17, 2008 Share Posted April 17, 2008 Well, then there is an error with your code. All browsers except IE lte 6 support :hover for any tag.Can you show us your attempt? Link to comment Share on other sites More sharing options...
jeffman Posted April 17, 2008 Share Posted April 17, 2008 I posted on this just a couple days ago. IE7 supports :hover when the doctype is strict, but not when it's missing or transitional. Link to comment Share on other sites More sharing options...
banzemanga Posted April 17, 2008 Author Share Posted April 17, 2008 Yes, Deirdre's Dad. It works like a charm now. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.