jquery - 如何显示已访问的 div 的颜色已更改？

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

但问题是 hover 工作正常但 visited 不工作。

Answer 1

From MDN

:visited CSS 伪类让您只选择链接 <a>访问过的标签。你不能将它与 <div> 一起使用

在您的情况下，您需要在使用 javascript 聚焦/模糊时显式更改 div 类

喜欢

.visited 
{
 color: blue;
}

JS

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