Задать вопрос
@dim5on
javascript

Как менять стили path элемента при ховере на соседний блок?

Добрый день ! Есть такая разметка :

<div class="col-12 projects__cards">
    <svg class="projects-paths" width="740" height="405" viewBox="0 0 740 405" fill="none" xmlns="http://www.w3.org/2000/svg"> 
        <path id="path-1" d="M220 103V1........" fill="#00AAFF"></path></svg>
<div class="projects__card text-center projects__card-7"></div>
</div>


Внутри SVG есть path элементы с уникальным id и display:none;.

Как при наведение на div с классом .project__card-7 делать у path, который находиться внутри SVG.parojects-paths display:block ?
  • Вопрос задан
  • 235 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
alams_stoyne
@alams_stoyne
Full Stack Developer - #PHP #CSS #JS #DB
Как вариант так:

$('.projects__card-7').hover(
function() {$('.projects-paths #path-1').show(); }, 
function() {$('.projects-paths #path-1').hide();}
 );
*... если много элементов на которые придётся наводить*
$('.project__card-*...*').hover(
function() {$('.project__paths #path_id*...*').show(); }, 
function() {$('.project__paths #path_id*...*').hide();}
 );


но выходит много кода я бы модифицировал... добавив например data параметр
<div class="col-12 projects__cards">
    <svg class="projects-paths" width="740" height="405" viewBox="0 0 740 405" fill="none" xmlns="http://www.w3.org/2000/svg"> 
        <path id="path-1" d="M220 103V1........" fill="#00AAFF"></path></svg>
<div class="projects__card text-center" data-pathid="path-1"></div>
</div>


И такой скрипт:

$('.projects__card').hover(
let path_id = $(this).data('pathid');
function() {$('.projects__card #'+path_id ).show(); }, 
function() {$('.projects__card #'+path_id ).hide();}
 );


А вообще переместив SVG ниже элементов на которые надо наводить задачу можно решить на чистом CSS
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
fallus
@fallus 
<style>
         .projects__cards{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            flex-direction: column-reverse;
         }
         .projects__card-7:hover + svg path{
            display: block !important;
         }
      </style>
      <div class="col-12 projects__cards">
         <div class="projects__card text-center projects__card-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam amet sapiente distinctio, temporibus tenetur sint, blanditiis non ipsam minima maiores, ipsum illum molestias, deleniti rerum qui! Autem, sed quasi culpa.</div>
         <svg class="projects-paths" width="740" height="405" viewBox="0 0 740 405" fill="red" xmlns="http://www.w3.org/2000/svg">
            <path style="display: none;" d="M 213.1,6.7c -32.4-14.4-73.7,0-88.1,30.6C 110.6,4.9,67.5-9.5,36.9,6.7C 2.8,22.9-13.4,62.4,13.5,110.9C 33.3,145.1,67.5,170.3,125,217c 59.3-46.7,93.5-71.9,111.5-106.1C 263.4,64.2,247.2,22.9,213.1,6.7z" /></svg>
      </div>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать парсер и админку
19 апр. 2024, в 14:12
30000 руб./за проект
Создать логотип
19 апр. 2024, в 14:10
500 руб./за проект
Разработка дизайна мобильного приложения которое управляет вентиляцией
19 апр. 2024, в 14:01
70000 руб./за проект
Ещё заказы