Jump to content

Simulate anchor using css (without javascript)


Recommended Posts

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 post
Share on other sites

This class with simulate a link to anything you apply them to:.mouseOver:hover {color: blue;text-decoration: underline;cursor: pointer;}

Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...