イメージのCSSトランジションの問題

Question

私が持っている問題の例を作った。

アイデアは、Webページを2に分割し、左側をCSSトランジション、右側を実際のコンテンツで分割することです。

ケース1：ここでは http://generowicz.nl/testing/Untitled-1.html

私はより明確なメニューを明らかにし、グレー画像全体左側とするときにマウスオーバー、それを完全に透明を埋めました。リンク（この例では "Test"）は、マウスオーバーも同様に（「スクロール」テキストのように）推移していますが、画像がテキストの上にあり、マウスオーバーが登録されていないため機能しません。私は "ポインタイベント"を探してみましたが、画像の後ろのテキストを選択できるようにしましたが、ポインタイベントであるので、画像上で遷移がトリガされなくなりました。

は「解決」するために、私が使用してみましたこの：ホバー::前に、この結果は次のとおりです。

ケース2：http://generowicz.nl/testing/Untitled-4.htmlここ

リンクと前景の移行フォアグラウンドであることを除いて、両方の仕事はもはやテキストリンクを超えていない。

私は

コード1

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 
#left{ 
 
\t text-indent:1.5cm; 
 
    width: 20%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
\t background: rgba(51,51,51,0.9); 
 
\t font-family: Helvetica; 
 
} 
 

 
#right { 
 
    width: 80%; 
 
    height: auto; 
 
    outline: 1px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: white; 
 
} 
 

 
#img { 
 
\t position: absolute; 
 
\t opacity: 0.8; 
 
\t width:100%; 
 
\t height:100%; 
 
\t -webkit-transition: opacity .25s ease-out; 
 
\t -moz-transition: opacity .25s ease-out; 
 
\t -o-transition: opacity .25s ease-out; 
 
\t transition: opacity .25s ease-out; 
 
\t color:#000; 
 
} 
 

 
#img:hover { 
 
\t opacity: 0; 
 
} 
 

 
h2 { 
 
\t font-size: 80px; 
 
\t color:#CCC; 
 
} 
 

 
h3 { 
 
\t font-size: 20px; 
 
\t color: #CCC; 
 
\t font-weight: lighter; 
 
} 
 

 
\t 
 

 
a:link { 
 
\t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
} 
 

 
a:link:hover { 
 
\t text-decoration: none; 
 
\t color: #09F; 
 
} 
 

 
a:visited { 
 
\t \t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
\t \t } 
 
\t \t 
 
a:visited:hover { 
 
\t text-decoration: none; 
 
\t color: #09F; 
 
} 
 
a:active { \t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
}

<div id="left"><img src="graysmall.png" name="img" width="93" height="55" id="img" /> 
 
    <h2> B </h2> 
 
    <h3><a href="../index.html">Test</a></h3> 
 

 
</div> 
 
<div id="right"><a href="../index.html">Scroll</a><br /> 
 
    Scroll 
 
    <br />Scroll 
 
    <p> <a href="../index.html">Scroll</a></p> 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br /> 
 
</div>

CODE2、私は十分にそれが明確になる願っています：

a:link { 
 
\t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
} 
 

 
a:link:hover { 
 
\t text-decoration: none; 
 
\t color: #09F; 
 
} 
 

 
a:visited { 
 
\t \t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
\t \t } 
 
\t \t 
 
a:visited:hover { 
 
\t text-decoration: none; 
 
\t color: #09F; 
 
} 
 
a:active { \t text-decoration: none; 
 
\t color: #CCC; 
 
    -webkit-transition: all 1s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 1s ease-out; FF4+ 
 
     -ms-transition: all 1s ease-out; IE10 
 
     -o-transition: all 1s ease-out; Opera 10.5+ 
 
      transition: all 1s ease-out; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 
#left { 
 
    width: 20%; 
 
    height: 100%; 
 
\t background: rgba(51,51,51, 1); 
 
\t position:fixed; 
 
\t color:#CCC; 
 
\t text-indent:1.5cm; 
 
} 
 
#right { 
 
    width: 80%; 
 
    height: auto; 
 
\t background: white; 
 
\t position: absolute; 
 
    right: 0; 
 
\t color:#CCC; 
 
\t text-indent:1.5cm; 
 
} 
 
#left:before { 
 
    position: absolute; 
 
    content: ''; 
 
    background: rgba(51,51,51, 0.8); /*partially transparent image*/ 
 
    width: 200px; 
 
    height: 200px; 
 
    pointer-events: none; 
 
\t -webkit-transition: all 0.25s ease-out; Saf3.2+, Chrome 
 
    -moz-transition: all 0.25s ease-out; FF4+ 
 
     -ms-transition: all 0.25s ease-out; IE10 
 
     -o-transition: all 0.25s ease-out; Opera 10.5+ 
 
      transition: all 0.25s ease-out; 
 
} 
 

 
#left:hover::before { 
 
\t position: absolute; 
 
    content: ''; 
 
    background: rgba(51,51,51, 0); /*partially transparent image*/ 
 
    width: 200px; 
 
    height: 200px; 
 
    pointer-events: none; 
 
} 
 
h2 { 
 
\t font-size: 80px; 
 
\t color: #CCC; 
 
\t font-weight: lighter; 
 
} 
 
h3 { 
 
\t font-size: 20px; 
 
\t color: #CCC; 
 
\t font-weight: lighter; 
 
}

<div id="left"> 
 
    <h2>B</h2> 
 
    <h3><a href="../index.html">Home</a></h3> 
 
</div> 
 
<div id="right"><br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll</div>

Answer 1

最初の例を使用して、noneに#img素子のpointer-eventsプロパティを設定し、#left:hover>#imgに#img:hoverセレクタを変更します。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 
#left { 
 
    text-indent: 1.5cm; 
 
    width: 20%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: rgba(51, 51, 51, 0.9); 
 
    font-family: Helvetica; 
 
} 
 
#right { 
 
    width: 80%; 
 
    height: auto; 
 
    outline: 1px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: white; 
 
} 
 
#img { 
 
    position: absolute; 
 
    opacity: 0.8; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events:none; 
 
    -webkit-transition: opacity .25s ease-out; 
 
    -moz-transition: opacity .25s ease-out; 
 
    -o-transition: opacity .25s ease-out; 
 
    transition: opacity .25s ease-out; 
 
    color: #000; 
 
} 
 
#left:hover>#img { 
 
    opacity: 0; 
 
} 
 
h2 { 
 
    font-size: 80px; 
 
    color: #CCC; 
 
} 
 
h3 { 
 
    font-size: 20px; 
 
    color: #CCC; 
 
    font-weight: lighter; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    color: #CCC; 
 
    -webkit-transition: all 1s ease-out; 
 
    Saf3.2+, Chrome -moz-transition: all 1s ease-out; 
 
    FF4+ -ms-transition: all 1s ease-out; 
 
    IE10 -o-transition: all 1s ease-out; 
 
    Opera 10.5+ transition: all 1s ease-out; 
 
} 
 
a:link:hover { 
 
    text-decoration: none; 
 
    color: #09F; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #CCC; 
 
    -webkit-transition: all 1s ease-out; 
 
    Saf3.2+, Chrome -moz-transition: all 1s ease-out; 
 
    FF4+ -ms-transition: all 1s ease-out; 
 
    IE10 -o-transition: all 1s ease-out; 
 
    Opera 10.5+ transition: all 1s ease-out; 
 
} 
 
a:visited:hover { 
 
    text-decoration: none; 
 
    color: #09F; 
 
} 
 
a:active { 
 
    text-decoration: none; 
 
    color: #CCC; 
 
    -webkit-transition: all 1s ease-out; 
 
    Saf3.2+, Chrome -moz-transition: all 1s ease-out; 
 
    FF4+ -ms-transition: all 1s ease-out; 
 
    IE10 -o-transition: all 1s ease-out; 
 
    Opera 10.5+ transition: all 1s ease-out; 
 
}

<div id="left"> 
 
    <img src="graysmall.png" name="img" width="93" height="55" id="img" /> 
 
    <h2> B </h2> 
 
    <h3><a href="../index.html">Test</a></h3> 
 

 
</div> 
 
<div id="right"><a href="../index.html">Scroll</a> 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <p> <a href="../index.html">Scroll</a> 
 
    </p> 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br />Scroll 
 
    <br /> 
 
</div>