css光标：指针不'；不能在div元素上工作

我正在开发一个Angular应用程序，我正在尝试使一个div具有“cursor:pointer”类。出于某种奇怪的原因，它似乎不起作用

我在stackoverflow上检查了多个类似的问题和答案，我也在谷歌上搜索了很多答案，但没有一个解决了这个问题。我甚至读到过一个像“关闭桌面上的Photoshop”这样可笑的解决方案来解决这个问题

我想知道这是否是某种错误

这是我模板的一部分：

<div class="social-icons_container"
     fxFlex
     [fxLayout]="direction"
     fxLayoutAlign="space-between">

  <div class="icon_container"
      (click)="onFacebookClicked()">

    <svg class="icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 128 128"
         [ngStyle]="{ 'width': logoSize }">

     ...and so on ...

等等

这是SCSS文件：

.social-icons_container {
  width: 50%;
  margin: 0 auto;
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;

    .icon_container {
      cursor: pointer;
    }
  }



<div _ngcontent-c12=""
     class="social-icons_container"
     fxflex=""
     fxlayoutalign="space-between"
     ng-reflect-fx-layout="row"
     ng-reflect-fx-layout-align="space-between"
     ng-reflect-fx-flex=""
     style="flex-direction: row;
     box-sizing: border-box;
     display: flex;
     place-content: stretch space-between;
     align-items: stretch;
     flex: 1 1 0%;">

<div _ngcontent-c12=""
     class="icon_container">

<svg _ngcontent-c12=""
     class="icon"
     viewBox="0 0 112.196 112.196"
     xmlns="http://www.w3.org/2000/svg"
     ng-reflect-ng-style="[object Object]"

 ...and so on...

.social-icons\u容器{
宽度：50%；
保证金：0自动；
位置：绝对位置；
底部：1.2rem；
左：0；
右：0；
.icon_容器{
光标：指针；
}
}
试试这种方法，也许会解决你的问题

.social-icons_container {
      width: 50%;
      margin: 0 auto;
      position: absolute;
      bottom: 1.2rem;
      left: 0;
      right: 0;

        .icon {
          cursor: pointer;
        }
      }

试试这种方法，也许会解决你的问题

.social-icons_container {
      width: 50%;
      margin: 0 auto;
      position: absolute;
      bottom: 1.2rem;
      left: 0;
      right: 0;

        .icon {
          cursor: pointer;
        }
      }

我使用您的代码创建了一个Stackblitz，除了
svg
部分

只要
图标容器
得到
有效尺寸

您可以尝试使用实际的svg更新它并对其进行测试

请参阅：
我使用您的代码创建了一个Stackblitz，除了
svg
部分

只要
图标容器
得到
有效尺寸

您可以尝试使用实际的svg更新它并对其进行测试

请参阅：
谢谢大家的帮助，但我发现了问题所在。
我的scss文件中有一些“遗留”代码，同一个类将光标指针重置为默认值

.icon_container {
   cursor: default;
}

这是我愚蠢的错误-我删除了代码块，现在它可以使用以下代码：

.icon_container {
   cursor: pointer;
}

谢谢你们的帮助，但我发现了问题所在。
我的scss文件中有一些“遗留”代码，同一个类将光标指针重置为默认值

.icon_container {
   cursor: default;
}

这是我愚蠢的错误-我删除了代码块，现在它可以使用以下代码：

.icon_container {
   cursor: pointer;
}

特异性是否正确？正如在is
social-icons\u容器中一样，
样式按预期工作。@ashish.gd是的，它是。我可以在social-icons\u容器上设置任何属性，它们都可以工作。我刚刚用“背景色”对它进行了测试，结果呈阳性。你能分享为
社交图标\u容器
生成的DOM树吗。我很想知道
icon\u container
div是否是
social-icons\u container
的直接子代，或者它是否有任何带有
ng content*
类的临时包装div，因为我对Angular Flex布局不太熟悉。如果你分享一个：）@kukkuz我不知道如何分享stackblitz上的内容:（我需要共享整个应用程序还是可以只共享相关部分？特异性是否正确？正如在is
social-icons\u container
中一样，样式按预期工作。@ashish.gd是的。我可以在social-icons\u container上设置任何属性，它们可以工作。我刚刚用“背景色”对其进行了阳性测试。您可以共享g吗为
social-icons\u container
生成的DOM树。我很想知道
icon\u container
div是否是
social-icons\u container
的直接子对象，或者它是否有任何带有
ng content*
类的临时包装器div，因为我对Angular Flex布局不太熟悉。如果您与他人分享，就很容易验证您的问题答：）@kukkuz我不知道如何分享stackblitz上的内容：（我需要共享整个应用程序还是可以只共享相关部分？您所说的“有效尺寸”是什么意思？例如在
width
和
height
属性中。在Stackblitz示例中，它根据其子
svg
元素获取宽度和高度。您所说的“有效尺寸”是什么意思？例如在
widt中h
和
height
属性。在Stackblitz示例中，它根据子元素
svg
获取宽度和高度。