Как показать, что цвет посещенного div изменился?

Question

Как показать, что цвет посещенного div изменился?

0

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

<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;
}

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

mck 28 апр. 2014, в 12:25

Источник

0

Примите во внимание тот факт, что :visited будут просто менять стиль, пока пользователь не очистит свою историю, поэтому не будет согласованным ... вам придется использовать другой метод (например, состояние журнала в БД), чтобы сделать это ...
webeno 28 апр. 2014, в 10:32

Теги:

jquery

css

css-selectors

2 ответа

Ещё вопросы

Примите во внимание тот факт, что :visited будут просто менять стиль, пока пользователь не очистит свою историю, поэтому не будет согласованным ... вам придется использовать другой метод (например, состояние журнала в БД), чтобы сделать это ...

Murali Murugesan · Answer 1 · 2014-04-28T09-16-00.000Z

Из MDN

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

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

подобно

.visited 
{
 color: blue;
}

JS

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

не работает, потому что есть постбэк, когда видео открывается во всплывающем окне.
Если происходит повторная запись, вам нужно поддерживать состояние и делать это во время загрузки страницы / document.ready
как сохранить состояние в клиентских скриптах.

Paul Redmond · Answer 2 · 2014-04-28T07-51-00.000Z

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

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

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