0

I want to implement a hover effect with CSS for a html input button. (Changing border color on mouse over).

Actually technically no problem - and it is working - however I have issues with Internet Explorer 7 as well as IE8, because the effect is only working like 80% of the times there.

I also change the mousecursor on hover - which is working without problems - but changing the border (or the background-color) is working only most of the times. Sometimes I enter the button with the mouse and nothing happens.

Is thtere anyway to circumvent this behaviour - without using javascript or code-blowing wrapper elements?

See the following example code for details:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id="document:html" lang="de">
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<style type="text/css">
input.linebutton {
    border: 1px solid #BBB;
    margin: 0 2px;
    background-color: #EEE; 
    text-align: left; 
    background-position: 2px 2px;
    background-repeat: no-repeat; 
    padding: 1px 3px 1px 23px;
    width: 0; /* for IE only */
    overflow: visible;
    cursor:pointer;
    height:22px;
}
input.linebutton:hover {
    border: 1px solid #FF8C00;  
    background-color: #EEE; 
    outline: none;
}
input.linebutton:active, .linebutton:focus {
    border: 1px solid #000000;  
    background-color: #EEE; 
    outline: none;
}
.linebutton[class] { /* IE ignores [class] */
    width: auto;
}
</style>
</head>
<body >
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" />
</body>
</html>

Thanks in advance!

2
  • 1
    What happens without the onblur and onfocus attributes? What does setFocus() do? Jan 10, 2011 at 18:55
  • the javascript attributes were inserted by a framework, they have no influence to the problem - I remove them from the example!
    – räph
    Jan 11, 2011 at 6:19

3 Answers 3

4

Digging graves up, but I had the same issue with IE7 and input:hover. When I changed the doctype to strict it was then support in IE7. No js needed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE7 support for hover

1
  • Add this DOCTYPE makes all the fonts in my page become bigger, what's going on ?
    – RRTW
    Oct 19, 2012 at 8:08
0

Not quite so elegant but maybe some jQuery?

jQuery("input.linebutton").hover(function() {
  jQuery(this).addClass("HoverClassName");
}, function() {
  jQuery(this).removeClass("HoverClassName");
});
0

Just replace your input[type=submit] by a button and you should be fine.
Your example modified would like like this:

<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.