Jump to content
Sign in to follow this  
banzemanga

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?

Share this post


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;}

Share this post


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.

Share this post


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.

Share this post


Link to post
Share on other sites

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.

Share this post


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?

Share this post


Link to post
Share on other sites

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.

Share this post


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...
Sign in to follow this  

×
×
  • Create New...