Как убрать курсор в SPAN?

Question

[serega danet]

Пример:
Slice
В светлой теме браузера:

это курсор, он мигает. Как его убрать

.nav-dots {
   text-align: center;
   position: absolute;
   bottom: -40px;
   height: calc(16px + 2*5px);
   width: 100%;
   display: none; }

.nav-dots span {
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   margin: 5px;
   background-color: rgba(100, 100, 100, .8);
   opacity: 0.5;
&:hover {opacity: 1.0;  }
   cursor: pointer;
   box-shadow: 3px 3px 5px rgba(10, 10, 10, 1.0),
          inset 2px 2px 4px rgba(10, 10, 10, 1.0); }

.nav-dots span.nav-dot-current {
   background-color: rgba(220, 220, 220, 1.0);
   box-shadow: 3px 3px 5px rgba(20, 20, 20, 1.0),
       inset 2px 2px 4px rgba(20, 20, 20, 1.0); }

<div id="nav-dots" class="nav-dots">
      <span class="nav-dot-current"></span>
   </div>

курсор ставится в class="nav-dot-current"> , он текущий стиль. Остальные просто

span{ border-radius: 50%;
              cursor: pointer; }

с круглой границей. pointer нужен.
В стилях ничего полезного нет. Можно не смореть.

Как убрать мигающий курсор?

Comments

[alexalexes]

Вы не путайте нативный css и синтаксис препроцессоров css, таких как less и sass.
Если вы используете препроцессоры, то пожалуйста, любые оптимизации записей css вам доступны.

[serega danet]

alexalexes, в не использую препроцессоры. Я даже не знаю, как их запускать, и не видел в глаза.
Зато в этом проекте в стандартном внешнем style.css это наследование работает, в более сложных стилях.
Эти препроцессоры частично устарели - стандартный CSS берет часть их функций.
Интересно, как его применить, когда стиль из 1 строки.

[serega danet]

Логично же добавлять состояние объектов одной командой. В данном случае просто указать их псевдокласс.
Есть проекты, где стиль описывается около 10 классов, тегов, ИД. И там идут целые столбики из классов для :hover, :active, больше чем сами свойства, в разы.
Как не дублировать имена классов ?

[serega danet]

По сути, хочется просто поднять :hover вверх, через запятую, и без указания &. Но не работает

[serega danet]

Полазил, похоже будет работать самое очевидное:

.sb-description а {
  &:hover {
  text-decoration: none !important;
} }

Чего сразу не догадался, скобок не хватило. Осталось проверить

[alexalexes]

а

У вас буква а в селекторе кириллицей записана, а нужно латиницей. Вот и весь секрет.

[serega danet]

alexalexes, это же ручкам набирал , там в оригинале копия с h1. Но вам приз за глазастость. У меня на форуме разницы нет ⛔ у меня все комменты с телефона

[serega danet]

alexalexes, это вообще стандартная запись для & , здесь нет никакого изобретения

[alexalexes]

Вложенные правила - это scss. Без вложенности - это обыкновенный css.
Css более древний, чем Scss. Scss будет капризнее себя вести в разных браузерах. Поэтому любые финты ушами с использованием его синтаксиса нужно перепроверять, в каких браузерах они поддерживаются.
Лучше уметь различать конструкции синтаксиса, которые были css, а что новодел.

[serega danet]

alexalexes, "новодел" — что же вы так оскорбляете Chromium ? С выходом каждой версии добавляется какие свойства. Эти же не тайна . на каком-то сайте все расписано, какие what's new с какой версией. Эта вложенность уже пару месяцев (?), как часть CSS.
Откройте DevTools , slice.css — где там SCSS ? Вложенность работает.

[serega danet]

Все носятся с этими префиксами. Я их удаляю принципиально. В меня чистый код. Есть какте то редкие остатки -webkit- , без которых свойство не существует . А так браузеры сами должны подтягиваться. Тот же FF давно поддерживает большую часть -webkit- .

[alexalexes]

https://caniuse.com/?search=nesting
https://developer.mozilla.org/en-US/docs/Web/CSS/N...
Не оскорбляю. Реально, новодел. Chrome 120 появился с этой поддержкой в декабре 2023, firefox 117 - в августе 2023.
Учитывая, что есть зоопарк андроид браузеров, и отдельным особняком стоит Safari, то нарваться на пользователя с неподдерживаемым браузером - вероятность еще очень высока. Нужно еще подождать 3-4 года, чтобы это стало повсеместно.

[serega danet]

alexalexes, не забывайте, что весь этот зоопарк браузеров 90% на Chromium. И 100% из этих 90%, а скорее просто 100% браузеров на автообновлении. Мобильные браузеры 100% все , а единицы даже популярные, типа Cent ... Хорошо , если там 1% наберется.
Благодарить или ругать Гугл за эту массовую миграцию ?
Остаются те, у кого ОС не поддерживает современные архитектуры. Vivaldi с поддержкой этой вложенности на Win7 не запустится. Нет смысла рассчитывать на эти старые железки.
Так что ждать 3-4 года никто не будет.
Алекс, спасибо, затянули меня на первоисточник. Там вообще непонятно. Похоже, что самый модный & уже не обязателен, можно и *, а можно и без них — и так пойдет

[serega danet]

alexalexes, я конечно поумничал , что это будет работать

.sb-description а {
  &:hover {  text-decoration: none !important;} 
}

работает ,конечно, но только на :hover :) . Даже на Moziilla сказано, что & просто суммирует стили

вот рабочий вариант :

.sb-description а {
             text-decoration: none !important; 
  &:hover {  text-decoration: none !important;} 
}

ну выглядит колхозно.
Неужели нет способа перечислить все состояния :hover , :active , :visited и всем задать одинаково одной строкой ?

[alexalexes]

Там же есть пример с перечислением состояний:

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

[serega danet]

alexalexes, нет ! это не будет работать . Томатный фон не будет для голого .example {} .
Значит, одной строкой нельзя для стиля его :hover. Какая -то недоработка в этом CSS.

Помните, они даже заложили

.card {
    .example  & & & { ... }  }

чтобы получить
.example .card .card .card { ... }
--- это мне вообще не понятно, где использовать.
Всякую фигню закладывают. А как получить что-то вроде

.sb-description а, &:hover, &:active, &:focus { 
         text-decoration: none !important; }

[serega danet]

serega danet, после лёгких экспериментов понял, что сам путаюсь в этих стилях.
Последний пример не возможен, он просто не нужен. В &:hover и другие состояния закладываются отличия.
Обидно, что никто не подсказал ;)
Все тоже тормозят ?

Answer 1

[serega danet]

правильный ответ:
user-select: none;

Comments

[serega danet]

интересно, что если я сам найду ответ , но не признаю его решение, мой % падает :) .
За сутки никто не ответил. Очень жаль.