CSSトランジションは、1台のコンピュータを除いて...どこでも動作するようです

Question

ここで私が働いているページです：

http://jordankline.design/designs.html

が、私はの名前を明らかにし、これらのタイルのそれぞれのアニメーションにおけるCSSのフェードを持っているが各プロジェクトはあなたが動かすときに。これは私が試したすべてのブラウザで完璧に動作します...あなたのマウスをクリックするだけでアニメーションが発生する友達のコンピュータのChromeは例外です。私たちは同じオペレーティングシステム（Windows）と同じバージョンのChrome（51.0.2704.106）を持っているので、何が起こっているのか分かりません。私の唯一の推測は、それは彼女のモニターがタッチ機能を持つことと関係があるかもしれないということですか？ （あなたは何のフォーカスやホバーセレクターを持っていないので）

.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

これを追加します：

はここで、関連するクラスのCSSだ

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

:focus、それは同様にキーボードのユーザーのために動作が保証されます。