CSS转换似乎无处不在......除了一台计算机

Question

这是我正在处理的页面：

http://jordankline.design/designs.html

我在每个瓷砖上都有一个CSS淡入淡出动画，当你悬停时会显示每个项目的名称。它适用于我尝试过的每个浏览器......除了我朋友计算机上的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确保它也适用于键盘用户。