/    Sign up×
Community /Pin to ProfileBookmark

IE ignoring a:hover

Copy linkTweet thisAlerts:
Jul 17.2007

I made up a quick “glossy” looking button for some links on my page. However for some reason IE ignores the a:hover property unless there is an “href” statement in the link. Is there any way around this other then adding an “href” to every link? [url=http://deltascan.net/example.html]Example[/url]

Here’s my link CSS:

[code=html]
#content a {
color:#4682b4;
text-decoration:none;
font-weight:bold;
}
#content a:hover {
cursor:pointer;
}
#content a.btn {
color:#ffffff;
font-size:10px;
padding-bottom: 0.25em;
text-align:center;
padding-left: 8px;
padding-right: 8px;
background-image:url(/images/btn1.png);
background-repeat: repeat-x;
margin-bottom: 10px;
}
#content a.btn:hover {
background-image: url(/images/btn1h.png);
background-repeat: repeat-x;
cursor:pointer;
}
#content a.btn:active {
background-image: url(/images/btn1a.png);
background-repeat: repeat-x;
}
[/code]

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJul 17.2007 — No, there's no way around it using purely CSS. You could attach an onmouseover and onmouseout JavaScript event if you want, but Internet Explorer only supports :hover, :visited, :link, :active and :focus on anchor tags that have an href.
Copy linkTweet thisAlerts:
@TJ111authorJul 17.2007 — I guess I'll just add a mouseover effect or something.
Copy linkTweet thisAlerts:
@toicontienJul 17.2007 — Here's another question, why is an <a> tag being used without an href? Are you trying to build a DHTML menu? You can always put "#" for an href and then IE-Win will recognize styles on it. You could use JavaScript to nullify the link click with:

&lt;a href="#" onclick="return false;"&gt;&lt;/a&gt;
That might be a better solution.
Copy linkTweet thisAlerts:
@TJ111authorJul 17.2007 — I'm using them to show/hide divs as well some "go back" links, etc, but only on certain pages. The href="#" causes you to jump to the top of the page, so here's what I'm doing now.

[code=html]
 <a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('accountSettings'), this);">Change Account Settings</a>
<a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('passForm'), this);">Change Password</a>
<a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('portalForm'), this);">Change Portal Settings</a>
<a class="btn" href="portal.php">Back to Portal</a>
[/code]
Copy linkTweet thisAlerts:
@pentaceJul 17.2007 — There is a pure cdd way but its a pain and time consuming. You have to have both button images as one picture and set the podition of the image and then on hover have the postion change. But its much easier to make a function if u are doing multiple buttons like. Function swapit(targ,imge){

Document[targ].src=[imge];

}

Then add onmouseover=sawpit(name,'buttonover.gif) onmouseout=(name,'buttonoff.gif').
Copy linkTweet thisAlerts:
@toicontienJul 17.2007 — I'm using them to show/hide divs as well some "go back" links, etc, but only on certain pages. The href="#" causes you to jump to the top of the page, so here's what I'm doing now.

[code=html]
 <a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('accountSettings'), this);">Change Account Settings</a>
<a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('passForm'), this);">Change Password</a>
<a class="btn" href="javascript:void(0);" onclick="showElement(document.getElementById('portalForm'), this);">Change Portal Settings</a>
<a class="btn" href="portal.php">Back to Portal</a>
[/code][/QUOTE]

Add [B]return false;[/B] to the end of your onclick's. That will prevent the browser from jumping.
Copy linkTweet thisAlerts:
@LazerJul 18.2007 — Hello My friend.

The simple answer is: you used WRONG syntax.

use in your CSS as folow: [B]cursor:hand;[/B] and NOT pointer.

AND

if you want to, you can add [B]style="cursor:hand;"[/B] in the IMG tag of the button.

GoodLuck!
Copy linkTweet thisAlerts:
@LazerJul 18.2007 — and correct the: padding-bottom: 0.25em;

to 0.25cm;
Copy linkTweet thisAlerts:
@LazerJul 18.2007 — AND

In order for :hover to work, you MUST have href="#" in <a> tag.

AND

add [B]return false;[/B] after the onclick="javascript(function); return false;"

this will prevent from the href to work, and use ONLY your onClick.
Copy linkTweet thisAlerts:
@WebJoelJul 18.2007 — Hello My friend.

The simple answer is: you used WRONG syntax.

use in your CSS as folow: [B]cursor:hand;[/B] and NOT pointer.

AND

if you want to, you can add [B]style="cursor:hand;"[/B] in the IMG tag of the button.

GoodLuck![/QUOTE]

"cursor: hand;" is [I]IE-proprietary[/I] and will only work for IE5.x and less. The correct [I]compliant[/I] selector is "cursor: pointer;". If you expect to still serve a page to a user whom uses IE5.x, you can use [I]both[/I] selectors safely:

[SIZE="3"]cursor: pointer; cursor: hand; [/SIZE]

[B]in this order[/B]. IE5.x will read/use "hand" and ignore "pointer", and compliant browsers (any IE 6x or greater, Firefox, Mozilla, Opera, Konqueror, Seamonkey, etc etc) will ignore "hand" and use "pointer".

You need to use "pointer" first and "hand" last or else IE5.x will throw a fit :rolleyes:
×

Success!

Help @TJ111 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...