pointer-events: none is not working : <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>
