html - CSS 过渡似乎无处不在……除了一台计算机

Question

这是我正在处理的页面:

http://jordankline.design/designs.html

我在每个图 block 上都有一个 CSS 淡入动画，当您悬停时会显示每个元素的名称。它在我试过的每个浏览器上都能完美运行……除了我 friend 电脑上的 Chrome，它的动画只在你点击(而不是悬停)时出现。我们有相同的操作系统 (Windows) 和相同版本的 Chrome (51.0.2704.106)，所以我不确定发生了什么。我唯一的猜测是，这可能与她的显示器具有触摸功能有关？

这是相关类的 CSS:

.boxInner .titleBox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 38%;

    background: #000;
    background: rgba(255,255,255, 0.7);
    color: #000;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    font-family: MinionPro;
    font-size: 100%;
    letter-spacing: 2px;

    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
} 

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
    opacity: 1;
}

Answer 1

添加这个(因为你没有焦点或悬停选择器):

a:hover .titleBox, a:focus .titleBox {
    opacity: 1;
}

:focus 确保它也适用于键盘用户。