Background Color on Input Type=Button :Hover State Sticks in Ie

Background color on input type=button :hover state sticks in IE

There might be a fix to <input type="button"> - but if there is, I don't know it.

Otherwise, a good option seems to be to replace it with a carefully styled a element.

Example: http://jsfiddle.net/Uka5v/

.button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

Upsides include that the a element will style consistently between different (older) versions of Internet Explorer without any extra work, and I think my link looks nicer than that button :)

Change background color of input box when you hover over a row in a table?

As mentioned in the comments, just use a transparent background.

CSS

td {
    background: red;
}

td:hover {
    background: green;
}

input {
    background: transparent;
}

HTML

<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
</table>

How to prevent sticky hover effects for buttons on touch devices

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
    background-color: blue;
}

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

submit button stays hover color after clicked

i assume you are styling your button on focus in order to get rid of the outline, so simply split the selector into 2 and on focus remove only the outline:

.form input:focus {  background: #FFFFAD;  outline: none;}.buttons {  text-align: left;}.buttons input {  font-size: 2.5em;  font-weight: bold;  font-family: "Arial", serif;  padding: 8px 40px;  background: #4470B6;  border: 0px;  margin-left: 0px;  margin-right: 50px;  margin-top: 50px;  -moz-border-radius: 50px;  -webkit-border-radius: 50px;  border-radius: 50px;  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);  box-shadow: 0 0 4px rgba(0, 0, 0, .75);  color: #FFFAFA;}.buttons input:hover{  background-color: #50627E;  outline: none;  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);  box-shadow: 0 0 1px rgba(0, 0, 0, .75);}.buttons input:focus {  outline: none;}

<!--  Details Form -->
<section class="details">  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
    <div class="form">      <label>First Name:</label>      <input type="text" name="firstname" placeholder="First Name" autofocus />    </div>
    <div class="buttons">      <input type="submit" value="Search">      <input type="reset" value="Reset">    </div>  </form></section>

:hover does not seem to be working on custom buttons

1) Open your page in Google Chrome;

2) Press F12 for "Developer Tools" to open;

3) Select your problematic input;

4) On the right you have the applied styles;

5) On the "Styles" tab, click on the 2nd icon, a cursor inside a dotted rectangle;

6) Select ":hover", so that you can see what's happening when your input is being hovered and find the problem!

Boostrap: Why does input group button revert to default grey when mouse away?

Nvm, I fixed my own problem by doing

#Add-Button, #Remove-Button {
  background-color: transparent;
}

Store background-color when hover a table row in jQuery

You could store the previous (original) value in the data property:

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        var $this = $(this);

        if (!$this.data('originalBg')) { // First time, no original value is set.
            $this.data('originalBg', $this.css('background-color')); // Store original value.
        }
        $this.css("background-color", "Lightgrey");
    }, function() {
        var $this = $(this);

        $this.css("background-color", $this.data('originalBg'));
    });
});

If you're using HTML5, you can set the data property directly in the <tr> element (docs):

<tr style="background-color: #abc123;" data-originalBg="#abc123"> ... </tr>

That way, you can simply get away with:

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        $(this).css("background-color", "Lightgrey");
    }, function() {
        $(this).css("background-color", $this.data('originalBg')); // Already set via the data-originalBg attribute of the `tr`
    });
});

Odd visual effect (little line shows) when hovering over button in browser

Set text-decoration property of your <a> tag to none as you are using button inside it.

a {
color: #000000;
text-decoration:none;
}

Complete Code

element.style {    margin-top: 4px;    text-decoration: none;    width: 75px;}*:before, *:after {    box-sizing: border-box;}*:before, *:after {    box-sizing: border-box;}.btn-m {    background-color: rgb(220, 211, 188);    border-color: rgb(120, 97, 68);    color: rgb(69, 39, 0);}.btn-xs, .btn-group-xs > .btn {    border-radius: 3px;    font-size: 12px;    line-height: 1.5;    padding: 1px 5px;}.btn {    -moz-user-select: none;    background-image: none;    border: 1px solid transparent;    border-radius: 4px;    cursor: pointer;    display: inline-block;    font-size: 14px;    font-weight: normal;    line-height: 1.42857;    margin-bottom: 0;    padding: 6px 12px;    text-align: center;    vertical-align: middle;    white-space: nowrap;}.btn-m {    background-color: rgb(220, 211, 188);    border-color: rgb(120, 97, 68);    color: rgb(69, 39, 0);}.btn-xs, .btn-group-xs > .btn {    border-radius: 3px;    font-size: 12px;    line-height: 1.5;    padding: 1px 5px;}.btn {    -moz-user-select: none;    background-image: none;    border: 1px solid transparent;    border-radius: 4px;    cursor: pointer;    display: inline-block;    font-size: 14px;    font-weight: normal;    line-height: 1.42857;    margin-bottom: 0;    padding: 6px 12px;    text-align: center;    vertical-align: middle;    white-space: nowrap;}input, button, select, textarea {    font-family: inherit;    font-size: inherit;    line-height: inherit;}button, html input[type="button"], input[type="reset"], input[type="submit"] {    cursor: pointer;}button, select {    text-transform: none;}button {    overflow: visible;}button, input, optgroup, select, textarea {    color: inherit;    font: inherit;    margin: 5px;    text-decoration: none;}* {    box-sizing: border-box;}a {    color: #000000;    text-decoration:none;
}body {    font-family: Tahoma,Verdana,sans-serif;}body {    font-family: Tahoma,Verdana,sans-serif;}body {    color: #333;    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;    font-size: 14px;    line-height: 1.42857;}html {    font-size: 62.5%;}html {    font-family: sans-serif;}

<body><div style="position: absolute;top: 58px;left: 100px;"><a href="log.php?Range=Today"><button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only.">Today</button></a>
<button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button">Last 7 Days   </button>
    <a href="">        <button title="week." type="button">Week</button>    </a>    <a href="log.php?Range=ThisMonth"><button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button">This Month</button></a></div></body>

How to remove/ignore :hover css style on touch devices

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

---

Related Topics