Internet Explorer cursor: auto

Question

I have a wrapper div that contains all of my content. I want this wrapper div to have a cursor: pointer because it's clickable, but I don't want the content inside the wrapper to have that cursor pointer:

So I set the wrapper to cursor: pointer , and the content div to cursor: auto , and it works fine...in everything except Internet Explorer (I'm using IE11). The problem in IE is that cursor: auto doesn't reset the cursor to its default state for each element, but instead sets it to the parent's cursor setting. (see cursor:auto behaviour in IE 8 and 9 ). So in IE, I always see a pointer and it makes it seem like the whole page is clickable.

The problem with the solution in the answer I linked to is that even if I set the content area to have cursor: default , which turns the pointer cursor to a normal cursor, when I hover over text I don't get a text cursor, rather a normal, default one. Is there any obvious solution to this problem aside from specifying each element manually inside the content div to have its default cursor? In other words:

.wrapper {
    cursor: pointer;
}

.content {
    cursor: default;
}

.content p, .content h1, .content h2.... {
    cursor: text;
}

.content a {
    cursor: pointer;
}

etc.....

Answer 1

Just change your layout like this, see fiddle https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/45/

html

<div class="wrapper">
  <a href="#">
    <div class="left">

    </div>
  </a>
  <div class="middle">

  </div>
  <a href="#">
    <div class="right">

    </div>
  </a>
</div>

CSS

.wrapper {
  width: 100%;
  height: 100vh;
}

.left,
.right {
  width: 150px;
  height: 100%;
  float: left;
  background-color: blue;
}

.middle {
  width: calc(100% - 300px);
  height: 100%;
  float: left;
  background-color: gray;
}

Answer 2

you can use the * selector:

.content > * {
    cursor: default;
}