Как изменить цвет посещенных div?

88
6

Я работаю над приложением, на котором есть разные видео. Когда пользователь просматривает видео, цвет этого видео должен быть изменен, чтобы пользователь знал, какое видео он просматривает раньше. Мой код

<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image">
<a href="http://player.vimeo.com/video/92730281" class="html5lightbox" data-group="amazingcarousel-12">
<img src="https://i.vimeocdn.com/video/472543369_960.jpg" />
</a>
</div>
<div class="amazingcarousel-title">Main Display</div>
<div class="amazingcarousel-txt">How the Test Screen Look like.</div>
</div>
</li>

<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image">
<a href="http://player.vimeo.com/video/92730282" class="html5lightbox" data-group="amazingcarousel-12">
<img src="https://i.vimeocdn.com/video/472543372_960.jpg" />
</a>
</div>
<div class="amazingcarousel-title">Functions</div>
<div class="amazingcarousel-txt">Which buttons or functions you need to know</div>
</div>
</li>

Я использую следующий CSS для зависания

div .amazingcarousel-item-container:hover 
{
opacity: 0.1;
color: red;
}

и я использую следующий для эффекта посещения

div .amazingcarousel-item-container:visited 
{
opacity: 0.1;
color: blue;
}

Но проблема в том, что наведение работает правильно, но посещение не работает.

спросил(а) 2021-01-25T17:07:02+03:00 4 месяца, 3 недели назад
1
Решение
77

Из MDN

Псевдо-класс :visited CSS позволяет вам выбирать только теги <a>, которые были посещены. Вы не можете использовать его с помощью <div>

В вашем случае вам нужно явно изменить класс div, когда вы фокусируете/размываете, используя javascript

подобно

.visited 
{
color: blue;
}

JS

element.ClassName=element.ClassName+ ' visited' ;

ответил(а) 2021-01-25T17:07:02+03:00 4 месяца, 3 недели назад
45

:visited только для тегов <a>.

Вы можете добавить класс, используя jQuery, а затем при необходимости подстроить класс.

$('.amazingcarousel-item-container').focus().addClass('watching');
$('.amazingcarousel-item-container').blur().removeClass('watching').addClass('watched');

ответил(а) 2021-01-25T17:07:02+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема