問題與圖像下的css轉換

Question

我舉了一個我遇到的問題的例子。

這個想法是將網頁拆分爲2，左側使用CSS轉換，右側使用實際內容。

案例1： http://generowicz.nl/testing/Untitled-1.html

這裏我犯了一個灰度圖像填充整個左側，當您將鼠標懸停它完全透明，露出了更加清晰的菜單。鏈接（在這種情況下爲「測試」）也應該具有鼠標懸停轉換（如頂部的「滾動」文本所示），但它們不起作用，因爲圖像位於文本之上，因此沒有註冊鼠標懸停。我嘗試尋找「指針事件」，這使得它可以選擇圖像後面的文本，但由於它是一個指針事件，因此圖像上的過渡不再觸發。

「修理」這個我嘗試使用：懸停::之前，這樣做的結果是：

案例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>

代碼2：

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

使用第一個示例，將#img元素的pointer-events屬性設置爲none，然後將#img:hover選擇器更改爲#left:hover>#img。

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>