курсор css: указатель не работает на элементе div

#css #angular #sass

Вопрос:

Я работаю над приложением 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], который устанавливает ‘cursor’ в ‘pointer’ . Я был бы признателен, если бы кто-нибудь опубликовал ответ с разумным и чистым решением. Я буду ждать 🙂

1. Правильна ли специфика? Как и в social-icons_container том, что стиль работает так, как ожидалось.

2. @ashish.gd да, это так. Я могу установить любое свойство в social-icons_container, и они работают. Я только что проверил его положительно с помощью ‘background-color’.

3. Можете ли вы поделиться сгенерированным деревом DOM для social-icons_container . Мне интересно узнать, является ли icon_container div прямым дочерним элементом social-icons_container или у него есть какая-либо промежуточная оболочка div с ng-content* классами, поскольку я не очень хорошо разбираюсь в макете Angular Flex.

4. Было бы легко проверить вашу проблему, если вы используете stackblitz 🙂

5. @kukkuz Я не знаю, как делиться материалами в stackblitz: (Нужно ли мне делиться всем приложением или можно поделиться только соответствующими частями?

Ответ №1:

Попробуйте этот способ, может быть, это решит вашу проблему

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

        .icon {
          cursor: pointer;
        }
      }

Ответ №2:

Я создал Stackblitz, используя ваш код, за исключением svg части.

Он работает правильно, пока icon_container получает допустимые размеры.

Вы можете попробовать обновить его с помощью вашего фактического svg и протестировать его.

Пожалуйста, обратитесь: https://stackblitz.com/edit/angular-6xlagm

1. что вы подразумеваете под «допустимыми размерами»?

2. Как в width height свойстве и . В примере Stackblitz он получает ширину и высоту на основе своих дочерних svg элементов.

Ответ №3:

Спасибо за ваши попытки помощи, ребята, но я выяснил, в чем проблема. У меня был некоторый «оставшийся» код в моем файле scss с тем же классом, который сбрасывал указатель курсора на значение по умолчанию.

 .icon_container {
   cursor: default;
}

Это была моя глупая ошибка — я удалил блок кода, и теперь он работает со следующим:

 .icon_container {
   cursor: pointer;
}