Question

我正在开发Angular应用，并且试图使div具有“ cursor：pointer”类。由于某些奇怪的原因，它似乎不起作用。

我在stackoverflow上检查了多个类似的问题和答案，我也在Google上搜索了很多答案，但是没有一个解决了这个问题。我什至读过关于“关闭桌面上的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

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

只要icon_container得到有效尺寸。

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

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

Answer 3

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

.icon_container {
   cursor: default;
}

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

.icon_container {
   cursor: pointer;
}

CSS光标：指针不适用于div元素

3 个答案: