Question

我正在处理有不同视频的应用程序。当用户观看视频时，应该更改该视频的颜色，以便用户知道他之前观看过哪个视频。我的代码是

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

但问题是悬停工作正常，但访问不起作用。

Answer 1

From MDN

:visited CSS伪类允许您仅选择已访问过的链接<a>标记。您无法将其与<div>

一起使用

在你的情况下，当你使用javascript

聚焦/模糊时，你需要明确地改变div类

喜欢

.visited 
{
 color: blue;
}

JS

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

Answer 2

:visited仅适用于<a>个代码。

您可以使用jQuery添加一个类，然后根据需要设置类的样式。

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

如何显示访问过的div的颜色有变化？

2 个答案: