Проблема с 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

Используя свой первый пример, установите для свойства pointer-events элемент #img значение 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>