[help] question about hover

[s00263668]

Is that hover only available for link?
I try to use hover for table, but it failed to display the effect. After that, i try on font but it still cannot work.

[Twey]

The :hover pseudo-class is meant to be available for all elements. However, there is (yet another) bug in IE that causes it to work only on <a> elements with hrefs.

[s00263668]

IE................ -.-|

Anyway, thanks for your help.
I think i will continue work on Javascript to come out the similiar effect

[jscheuer1]

IE................ -.-|

Anyway, thanks for your help.
I think i will continue work on Javascript to come out the similiar effect

You can do that but, oftentimes it is better to make it a link and use css. You can use this href:

href="javascript:void(0);"

That way clicking will do nothing. Then you can style the link anyway you like. Often it is useful to set its display:block; and, if contained in say a table cell, its height and width to 100%.

The advantage to using css is that it is much more universally supported than javascript effects.

[s00263668]

You can do that but, oftentimes it is better to make it a link and use css. You can use this href:

href="javascript:void(0);"

That way clicking will do nothing. Then you can style the link anyway you like. Often it is useful to set its display:block; and, if contained in say a table cell, its height and width to 100%.

The advantage to using css is that it is much more universally supported than javascript effects.

sorry, i'm quite new to web page design. Can you tell me what is the use for "javascript:void(0);"?

[jscheuer1]

sorry, i'm quite new to web page design. Can you tell me what is the use for "javascript:void(0);"?

Sure. With javascript active, it is the only 99.9999% certain to do nothing href I have ever come across. With javascript disabled, the odds of it doing nothing increase.

In more technical terms, the javascript: construct used as a preface for an href tells the browser that what follows is javascript code rather than a URL. The void() method prevents the script parser from taking most default actions. In the case of an href, that would be to load the URL or javascript output directly into the window, replacing the current page. Void() prevents this from happening. The 0 is just that, nothing. So, we have invoked the script interpreter, told it not to replace the page and told it not to do anything else. Just as a matter of convention, virtually all non-javascript enabled browsers will interpret this code as 'do nothing'.

For hover css, it allows an anchor element to have an href as required by IE. Once that has been satisfied, you can style the anchor tag in virtually any way that you please. You can make it mimic a <p>, <span>, <div> or <td> and even wrap it around an <img> or a <table>. The possibilities are quite numerous.

[Twey]

Sure. With javascript active, it is the only 99.9999% certain to do nothing href I have ever come across. With javascript disabled, the odds of it doing nothing increase.

Haha, nice.

The void() method prevents the script parser from taking most default actions. In the case of an href, that would be to load the URL or javascript output directly into the window, replacing the current page. Void() prevents this from happening.

Somewhat oversimplified. With javascript: URLs, the Javascript statement is evaluated, then the browser attempts to navigate to that value. For example:

javascript:'mypage' + '.' + 'html';

would try to go to "mypage.html". void (which isn't actually a function but a unary operator; it functions equally well without the brackets in Javascript-enabled browsers) ensures that no value is returned, thus causing the browser not to navigate away from the page.

[s00263668]

wow, thanks for help. It will be very interesting if I could wrap the link in image.

<tr><td class="hoverEffect">
<a href="javascript:void(0);">example.htm</a>
</td></tr>

here is my code. However, i found that the effect can't fill the whole cell.
is there any error in my coding?

[jscheuer1]

That doesn't really tell us much. It is the style that drives the whole thing. Using the markup you show in your above post, you would need to at least set the style like so for the anchor link in your stylesheet:

.hoverEffect a {
display:block;
width:100%;
height:100%;
}

.hoverEffect a:hover {
whatever you want it to do
}

[s00263668]

thanks john