css cursor：指针对div元素不起作用

Question

我正在开发一个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...

更新：我暂时解决了一个丑陋的解决方法 - 我添加了一个[ngStyle]，将'光标'设置为'指针'。如果有人用合理而干净的解决方案发布了答案，我将不胜感激。我会等待 ：）

Answer 1

尝试这种方式可能会解决您的问题

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

        .icon {
          cursor: pointer;
        }
      }

Answer 2

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

只要icon_container获得有效尺寸，它就能正常工作。

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

请参考：https://stackblitz.com/edit/angular-6xlagm

Answer 3

谢谢你帮助尝试的人，但我发现了问题所在。我的scss文件中有一些'剩余'代码，同一个类将光标指针重置为默认值。

.icon_container {
   cursor: default;
}

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

.icon_container {
   cursor: pointer;
}