Что поменять что бы что бы подсветка заработала для каждого блока отдельно при наведении мыши на блок?
В коде есть див с классом - анимацией. И при наведении на блок анимация должна включаться (блик на звезде), но почемуто не зависимо от блока наведения мыши, работает анимация всегда только у первого дива, а надо что бы у каждого блока включалась своя анимация. Подскажите как это исправить?
/*---*/ .place { display:flex; align-items: center; margin-top: 15px; } .place_title { margin-left: 15px; } .big-place_title { margin-left: 10px; } .place_number { font-family: MothFont1, serif; color: var(--primary-color); color: green; font-weight: 600; font-size:large; } .big-place_number { font-size:larger; } .star { display: block; vertical-align: top; width: 40px; height: 40px; background: var(--primary-color); background: green; position: relative; -webkit-clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); overflow: hidden; margin-left:10px; } .big-star { width: 60px; height: 60px; margin-left:0px; } .place:hover, .place:focus{ cursor: pointer; outline: none; } .light-star { position: absolute; top: 50px; left: -67px; width: 40px; height: 40px; background-color: rgb(253, 253, 253); filter: blur(19px); transform:skewX(244deg); animation: move 2s ease-in-out infinite both; display: none; } @keyframes move { 0% { left:0; } 100% { left:100px; } } .plp>.place:hover .light-star{ display: block; } |
/*---*/ .place { display:flex; align-items: center; margin-top: 15px; } .place_title { margin-left: 15px; } .big-place_title { margin-left: 10px; } .place_number { font-family: MothFont1, serif; color: var(--primary-color); color: green; font-weight: 600; font-size:large; } .big-place_number { font-size:larger; } .star { display: block; vertical-align: top; width: 40px; height: 40px; background: var(--primary-color); background: green; position: relative; -webkit-clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); overflow: hidden; margin-left:10px; } .big-star { width: 60px; height: 60px; margin-left:0px; } .place:hover, .place:focus{ cursor: pointer; outline: none; } .light-star { position: absolute; top: 50px; left: -67px; width: 40px; height: 40px; background-color: rgb(253, 253, 253); filter: blur(19px); transform:skewX(244deg); animation: move 2s ease-in-out infinite both; display: none; } @keyframes move { 0% { left:0; } 100% { left:100px; } } .plp>.place:hover .light-star{ display: block; }
<div class="tabflex"> <div class="plp" id="p1"> <div class="place" id="sub1"> <div class="place_star"> <div class="star big-star"></div> <div class="light-star" id="light"></div> <div class="place_number big-place_number">1 место</div> </div> <div class="place_title big-place_title">Некий текст для первого места.</div> </div> <div class="place" > <div class="place_star" > <div class="star"></div> <div class="light-star"></div> <div class="place_number">2 место</div> </div> <div class="place_title">Некий текст для вотого места </div> </div> <div class="place"> <div class="place_star"> <div class="star"></div> <div class="light-star"></div> <div class="place_number"></div> </div> <div class="place_title"></div> </div> </div> </div> |
<div class="tabflex"> <div class="plp" id="p1"> <div class="place" id="sub1"> <div class="place_star"> <div class="star big-star"></div> <div class="light-star" id="light"></div> <div class="place_number big-place_number">1 место</div> </div> <div class="place_title big-place_title">Некий текст для первого места.</div> </div> <div class="place" > <div class="place_star" > <div class="star"></div> <div class="light-star"></div> <div class="place_number">2 место</div> </div> <div class="place_title">Некий текст для вотого места </div> </div> <div class="place"> <div class="place_star"> <div class="star"></div> <div class="light-star"></div> <div class="place_number"></div> </div> <div class="place_title"></div> </div> </div> </div>
Дополнительно:
Работает-то оно у всех.
Только ваш light-star спозиционирован относительно body.
Поставьте relative тому, относительно кого должен быть спозиционирован абсолют.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать подсветку синтаксиса для каждого блока отдельно при наведении мыши на блок, можно воспользоваться CSS и JavaScript.
Вот пример кода, который позволит добиться такого эффекта:
```html
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 0;
position: relative;
}
pre code {
display: block;
}
pre.highlight {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
document.querySelectorAll('pre').forEach(function (block) {
block.addEventListener('mouseover', function () {
this.classList.add('highlight');
});
block.addEventListener('mouseleave', function () {
this.classList.remove('highlight');
});
});
```
В данном примере мы добавили CSS стили для блоков `