title: pointer-events: none is not working
body: <p>I am creating a web application where I made a clickable card. I want to disable the click event on anchor tag for zero Opportunities.</p>
  
  <p>But <code>pointer-events: none;</code> is not working. </p>
  
  <p>I have setup a snippet  here for better understanding.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fc-card-header {
      background: #1976d2;
      padding: 24px;
      height: auto;
      border-radius: 3px;
      display: block;
  }
  .svg-icon svg {
      width: 24px;
      height: 24px;
      fill: rgba(0,0,0,0.54);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="cmOpportunitySummary" class="white" style="text-decoration:none;pointer-events: none; cursor: default;;"&gt;
  &lt;div class="fc-card-header"&gt;
      &lt;div class="grid-row"&gt;
          &lt;div class="grid-cell text-left no-padding padding-right cell-auto-width"&gt;
              &lt;div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"&gt;&lt;svg viewBox="0 0 24 24"&gt;&lt;path d="M0 0h24v24H0z" fill="none"&gt;&lt;/path&gt; &lt;path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="grid-cell no-padding flex flex-vcenter"&gt;
              &lt;p class="text-left white"&gt;Opportunities&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="grid-row padding-top"&gt;
          &lt;div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"&gt;
              &lt;span class="heading white no-line-height"&gt;0&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>