Как сделать дефолтный ховер React?

@Mukzer · Регистрация: 08.09.2018

Студворк — интернет-сервис помощи студентам

Подскажите как можно сделать дефолтный hover на React. Есть три карточки, нужно что бы при заходе на страницу ховер был на средней, а когда поьзователь наводит на первую (к примеру), тогда со средней ховер убирается и ставится там где навёл, а если пользователь убрал курсор с карточек, ховер опять ставал на среднюю...

krvsa · 17.11.2022, 11:20

Mukzer, кто такой "hover"?

@Mukzer · 17.11.2022, 11:37 **[ТС]**

@mr_dramm · 17.11.2022, 11:45

Сообщение от krvsa

Mukzer, кто такой "hover"?

видимо автор имеет ввиду псевдокласс hover

На чистом html&css

HTML5
1
2
3
4
5
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item highlight"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            display: flex;
        }
        .item{
            height: 100px;
            border: solid;
            flex: 1;
            transition: background-color 1s;
        }
 
        .item:not(.highlight):hover ~ .highlight{
            background: transparent;
        }
        .item:not(.highlight):hover{
            background: black;
        }
 
        .item:nth-child(1){
            order: 0;
        }
        .item:nth-child(2){
            order: 2;
        }
        .item.highlight{
            background: #000;
            order: 1;
        }

@Mukzer · 17.11.2022, 11:48 **[ТС]**

На css вряд-ли такое сделать можно. Нужно что бы при заходе на странице у среднего элемента был бордер, а когда пользователь наводит на другие элементы бордер у среднего пропадает, и появляется там где навёл, если же пользователь убрал курсор, то бордер возвращается обратно на средний...

krvsa · 17.11.2022, 12:49

Сообщение от mr_dramm

видимо автор имеет ввиду псевдокласс hover

Псевдо класс на элемент не прицепить...

Mukzer, но можно сделать некий класс. Тогда его можно будет убирать с не нужных элементов и добавлять нужным.

При "старте" давай этот класс нужному (среднему) элементу...
При наведении убирай класс и добавляй тому, на кого навели.

Добавлено через 5 минут

Сообщение от Mukzer

если же пользователь убрал курсор, то бордер возвращается обратно на средний...

Кликните здесь для просмотра всего текста

Можно использовать как класс, так и псевдо класс.
Изначально класс вешается на "среднего"...
Тогда придется контролировать некую область... При заходе на которую, класс убирать и работа будет только с псевдоклассом. При уходе из области, опять добавлять класс "среднему" элементу.

@DrType · 17.11.2022, 13:11

Ну или без псевдоклассов вообще.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Hovers = () => {
  const items = [1, 2, 3];
  let [active, setActive] = React.useState(1);
  return (
    <div>
      {items.map((item, i) => (
        <div
          key={i}
          className={i == active ? "active" : ""}
          onMouseOver={() => {
            setActive(i);
          }}
          onMouseOut={() => {
            setActive(1);
          }}
        >
          {item}
        </div>
      ))}
    </div>
  );
};

CSS
1
2
3
.active {
  background: black;
}

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111

	Как сделать дефолтный ховер React? 17.11.2022, 11:15. Показов 561. Ответов 6 Метки react (Все метки) Подскажите как можно сделать дефолтный hover на React. Есть три карточки, нужно что бы при заходе на страницу ховер был на средней, а когда поьзователь наводит на первую (к примеру), тогда со средней ховер убирается и ставится там где навёл, а если пользователь убрал курсор с карточек, ховер опять ставал на среднюю... 0

krvsa 3837 / 1682 / 431 Регистрация: 14.03.2022 Сообщений: 4,250
	17.11.2022, 11:20
	Mukzer, кто такой "hover"? 0

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	17.11.2022, 11:37 [ТС]
	0

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	17.11.2022, 11:48 [ТС]
	На css вряд-ли такое сделать можно. Нужно что бы при заходе на странице у среднего элемента был бордер, а когда пользователь наводит на другие элементы бордер у среднего пропадает, и появляется там где навёл, если же пользователь убрал курсор, то бордер возвращается обратно на средний... 0

Как сделать дефолтный ховер React?

Решение