CODEWITHSUNDEEP
htmlcss
Tim Gerhard
Tim Gerhard

Reputation: 3597

IE11 :hover effect stops working when hovering over selects

I have a problem with my css hover on IE.

To simplify; I basically have a container div which will when hovered show a small div inside with some <select> tags inside (see code below). This setup works fine on all major browsers except (who guessed it) on Internet Explorer (11 and probably lower versions too).

The hover works fine, but as soon as you try to select a <option> from the two <select> tags, the :hover will for some reason no longer work and the div disappears.

Try this example in chrome / firefox etc to see the desired result & try then again in IE11 to see the problem.

.containerDiv {
  position: fixed;
  width: 500px;
  height: 500px;
  background: red;
  top: 0;
  left: 0;
}

.containerDiv:hover .someDiv {
  left:0;
}

.someDiv {
  position:absolute;
  top:0;
  left:-300px;
  width: 300px;
  background: blue;
  transition: all ease .5s;
}
<div class="containerDiv">
  <div class="hoverMe">
    Hover Me
    <div class="someDiv">
      <h3>
        Hi, I'm SomeDiv
      </h3>
      <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
      <br><br>
      <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
    </div>
  </div>
</div>

Upvotes: 1

Views: 237

Answers (1)

G43beli
G43beli

Reputation: 3952

As said in my comment you could use something like this as a workarround for this issue:

$("select").on("focus", function() {
    $(this).parent().addClass("hovered");
}).on("blur", function() {
    $(this).parent().removeClass("hovered");
});

Then apply .yourParentElement.hovered to the same rules as .yourParentElement:hover:

.yourParentElement:hover, .yourParentElement.hovered { /* some css rules */}

Upvotes: 1

Related Questions