Как сделать неактивный значок внутри интерактивного div?

У меня есть строки div, которые можно щелкнуть. Внутри каждой строки есть значок.

<div className = "row" ....>
<icon className = "filter".../>
</div>

Я пробовал использовать pointer-events: none; на иконке. но это не сработало

Как я могу сделать эти значки неактивными, пока доступен весь div?

Можете ли вы описать, что вы имеете в виду, говоря «сделать не кликабельным»? Объясните более подробно, какое поведение вы ожидаете по сравнению с текущим наблюдаемым поведением?

— 06.04.2021 12:45

Вы можете добиться этого эффекта (т. е. кликабельный родитель, не кликабельные дети), используя event.target и Делегирование событий.

— 06.04.2021 12:47

html css reactjs twitter-bootstrap

06.04.2021 12:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Ваш значок находится внутри div, поэтому на icon можно щелкнуть.

Так что попробуйте разместить их рядом, чтобы icon не нажимался:

div {
    display: flex;
}

div > div {
   background: orange;
   cursor: pointer;
}

div > icon {
   cursor: default;
}

<div>
    <div className = "row">
      1234567
    </div>
    <icon className = "filter">2</icon>
</div>

Но это должно быть для каждой строки

— 06.04.2021 12:47

@ Дэйв, ты прав. Ваш значок помещен в div. Это причина того, что значок имеет интерактивный курсор, когда вы наводите курсор на div. Таким образом, вы можете отредактировать свой HTML, чтобы получить желаемый результат.

— 06.04.2021 13:11

06.04.2021 12:44