IE11 has a bug that causes button styling to break when using CSS :hover

Buttons in IE11 are normally highlighted in cyan when hovered over, but adding a CSS rule with the :hover pseudo-class can cause this hover effect to break and buttons to exhibit strange behavior when clicked. In a simple JSFiddle test case with basic HTML containing only two buttons labeled "Prev" and "Next," the buttons work as expected.

Hovering over the "Prev" button gives this appearance:

https://i.sstatic.net/IdAWK.png

https://jsfiddle.net/qtsfokmy/

However, by adding an arbitrary CSS rule using the :hover pseudo-class, such as .AnythingYouWant:hover {}, the hover highlighting on the buttons is disabled. Clicking a button then causes the hover effect to get stuck even after moving the cursor away.

https://jsfiddle.net/vwhurLy4/

These issues were observed on a Windows 7 64-bit SP1 machine running IE11 11.0.9600.18230 with the Aero Theme enabled. It appears that Firefox and Chrome do not have the same problem with the :hover CSS rule, raising questions about whether this behavior is an IE11 bug or a result of invalid CSS implementation.

htmlcssinternet-explorer-11

Answer №1

My curiosity led me to wonder if there was a way to restore the default hover styling to the buttons. Surprisingly, it turns out that you don't need to go too far for that. Simply adding any non-empty button:hover rule seems to do the trick in fixing the default styling (an empty rule does not resolve the issue). For example, this rule doesn't make any visible changes, but it does bring back the default hover effect in IE11:

.AnythingYouWant:hover {}
button:hover {
  font-weight: normal;
}

I'm uncertain whether there is a more efficient "do nothing" CSS rule to utilize. To witness this "fix" in action, you can view this demonstration on JSFiddle:

https://jsfiddle.net/xkf5fbLd/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

Conceal the pseudo element when clicked

Running a WordPress site, I have a button on the home page that is set to load more posts when clicked. I wanted to add a touch of design by including an upside-down caret next to the text "load more posts" using pseudo-elements. While I successfully achie ...

csswordpressonclickpseudo-elementpseudo-class

Divide the PHP code into separate files

Can someone help me with a coding dilemma I have? I couldn't find any information on Google or this site about it. A friend of mine who has experience in website development and runs his own business uses an interesting system that is new to me. He ...

phphtmlincludesplit

Having trouble formatting the Modal form in Bootstrap when using AngularJS

The code runs successfully, but I am struggling to get the desired output. You can find the code here. <div class="modal fade" id="signup" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> ...

javascripthtmlcssangularjstwitter-bootstrap

Guide to Angular Directives: Assigning Attributes to innerHTML

Looking to add attributes to the inner HTML myTemplate.html <div class="custom-template"></div> HTML <template></template> directive app.directive('template', ['$compile', function($compile) { retur ...

javascripthtmlangularjsangular-directive

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

javascripthtmlangulartypescript

The "Read more" button is displaying inaccurate data

I have a problem with the read more buttons under my testimonials on the page. The left button is working correctly, but the right button is displaying text from the wrong testimonial. I'm not sure why this is happening as there are no console error ...

javascripthtmlcss

The code executes successfully when run locally with console logging, however, it encounters issues when run

As a newcomer to the project development world, I'm navigating my way through unfamiliar territory. Currently, I'm utilizing an npm module called mal-scraper to extract data (show titles, anime links, and images) from the MyAnimeList website. My ...

javascriptjqueryhtmlnode.js

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Prevent uniform width for child elements in flexbox when using flex-direction column

In my navigation bar, I implemented flex with flex-direction column to stack the child elements vertically. However, I am facing an issue where all the child elements have the same width. I want each child element to have its own specific width so that I c ...

htmlcssflexbox

Switch up the color of the flush list line break in Bootstrap 4

The code snippet taken from the documentation is as follows: <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac faci ...

cssbootstrap-4

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

javascriptjquerycsshtml

Creating a grid layout by designing boxes using CSS and HTML

I'm in the process of creating a homepage and I'd like it to resemble this design: (not the best quality, but the software I used was subpar (I miss mspaint)) Originally, I used buttons which made linking and customization easy, but I encounter ...

htmlcss

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

htmlcsstwitter-bootstrap

Instructions on how to perfectly center a square SVG both horizontally and vertically using CSS, ensuring that only the image is displayed within the viewport regardless of its size

Trying to display an SVG on mobile and desktop browsers has its challenges. The square shape of the SVG makes centering it vertically and horizontally using 'contain' ineffective, resulting in a centered square image, which is not the desired out ...

htmlimagecsssvgcentering

Google Maps is experiencing issues with navigating the map accurately

This is a code snippet on jfiddle that I need help with: http://jsfiddle.net/w8NRr/ The issue I'm facing is that when I attempt to move the map, it briefly moves and then returns to its original position automatically. Additionally, the map does not ...

htmlcssgoogle-mapsgoogle-maps-api-3

Building a single-page app optimized for mobile viewing with Foundation framework

Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...

javascriptcssmobileresponsive-designzurb-foundation

Unable to login using HTML textbox

My login functionality is set up using HTML buttons and textboxes, with the code behind handled in JavaScript within the source code. However, no matter if I enter the correct credentials (Admin and 123) or leave the fields blank, clicking the login button ...

c#htmlasp.netauthenticationcode-behind

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

javascripthtmlcssanimation

"Step-by-step guide on placing an order for the button

I am currently working with material-ui and encountering a roadblock. My goal is to design a homepage for a dashboard where the various services are listed. I am attempting to organize these 6 buttons into 2 rows and 3 columns, totaling 6 buttons in all. A ...

cssmaterial-ui