Как менять стили при наведении на тег area?
Добрый день, мне необходимо менять стили при наведении на один из тегов area. Вот здесь приведён пример кода: https://codepen.io/ArtemVaka/pen/JjvaqZr
Попробовал document.querySelectorAll("#map area").forEach(item => item.addEventListener("mouseenter", ...))) -- не работает. подскажите пожалуйста
Дополнительно:
В современном мире практически перестали использовать map и area.
А такие карты как у вас, рисуют в svg, а там нет проблем с наведением на отдельные области.
document.querySelectorAll("#map area").forEach(item => item.addEventListener("mouseenter", function(){ console.log('me'); })) |
document.querySelectorAll("#map area").forEach(item => item.addEventListener("mouseenter", function(){ console.log('me'); }))
Работает.
Другое дело как вы вообще собрались стилизовать area?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для изменения стилей при наведении на тег area в HTML, вы можете использовать псевдокласс :hover в CSS. Тег area обычно используется внутри тега map для создания кликабельных областей на изображениях.
Для начала, вам нужно определить стили для вашего тега area. Вы можете сделать это, добавив класс к вашему тегу area или применив стили напрямую к тегу. Например:
<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> </map> |
<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> </map>
Затем, в CSS вы можете определить стили для тега area и изменить их при наведении на него с помощью псевдокласса :hover. Например:
area { display: block; width: 100px; height: 100px; background-color: blue; } area:hover { background-color: red; } |
area { display: block; width: 100px; height: 100px; background-color: blue; } area:hover { background-color: red; }
В этом примере, при наведении курсора на тег area, его фоновый цвет будет меняться с синего на красный. Вы можете также изменить другие свойства стилей, такие как цвет текста, размер шрифта, отступы и т.д.
Убедитесь, что ваш тег area имеет определенные размеры (ширину и высоту), чтобы стили :hover срабатывали корректно. Также не забудьте проверить совместимость вашего кода с различными браузерами, чтобы убедиться, что изменения стилей работают правильно во всех ситуациях.
Для изменения стилей при наведении на тег area можно использовать CSS псевдокласс :hover. Тег area обычно используется вместе с тегом map для создания интерактивных карт на веб-странице. При наведении на область, определенную тегом area, можно изменить ее стили с помощью CSS.
Для начала необходимо создать стили для тега area в обычном состоянии. Например, задать цвет заливки или обводки области, размер шрифта и другие стили, которые хотите изменить при наведении курсора. Затем, используя псевдокласс :hover, можно указать новые стили, которые должны применяться при наведении на тег area.
Пример:
```css
area {
background-color: #f0f0f0;
border: 1px solid #ccc;
color: #333;
font-size: 16px;
}
area:hover {
background-color: #ccc;
border: 1px solid #333;
color: #fff;
font-size: 18px;
}
```
В данном примере при наведении на тег area цвет фона изменится на серый, обводка станет темнее, цвет текста изменится на белый, а размер шрифта увеличится. Это лишь пример, возможно изменение любых других стилей в зависимости от дизайна вашего сайта.
Таким образом, использование псевдокласса :hover позволяет создавать интерактивные эффекты при наведении на тег area и делает вашу веб-страницу более привлекательной и удобной для пользователей.