Нажмите «разрез» в режиме смешивания-смешивания

Question

Похоже, это должно быть возможно, но решение ускользнуло меня слишком долго. Можете ли вы сделать ссылку, кликабельную в фоновом режиме, раскрытую через отверстие, разрезанное в прокручиваемом div, используя режим mix-blend-mode? Я пробовал обычный трюк pointer-events:none, но это не работает, потому что «дыра» на самом деле не прозрачна и, вероятно, также потому, что фон фактически на два уровня вниз.

Вот мой код до сих пор:

<div style="height:400px;width:300px;margin:0 auto;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;"> 
 
    <div style="padding:20px"><span> 
 
     lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
 
     </span> 
 
    <br> 
 
    <br> 
 
    <a href="http://www.stackoverflow.com">Stack Overflow</a> 
 
    </div> 
 
    <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll"> 
 
    <div style="height:300px"></div> 
 
    <div style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey;pointer-events:none;"></div> 
 
    <div style="height:2000px"></div> 
 
    </div> 
 
</div>

Если вы прокрутите содержимое, вы увидите фоновое содержание приходят, чтобы посмотреть - со ссылкой - но я не могу работать как сделать ссылку кликабельной (если это возможно).

Спасибо за любые предложения. Решение JS/Jquery было бы неплохо, хотя прямой CSS - это первое предпочтение.

Answer 1

Свойство CSS в смешанном режиме описывает, как содержимое элемента должно сочетаться с содержимым прямого родителя элемента и фона элемента.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Blending режимы просто обеспечивают визуальные способы смешивать цвета слоя, но DOM все та же. Таким образом, так, как вы приближаетесь к нему прямо сейчас, нет возможности щелкнуть по этой визуальной «дыре».

Вам нужно будет использовать JavaScript, чтобы фактически вызвать щелчок по ссылке за элементом.

Используя CSS, я обнаружил, что есть возможность щелкнуть. Вы можете использовать указатель-события: нет; это может сделать ссылку за кликабельную. Тем не менее, это заставит элемент не реагировать на какое-либо событие мыши, включая прокрутку.

#a{pointer-events: none;}

<div style="height:400px;width:300px;margin:0 auto;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;"> 
 
    <div style="padding:20px"><span> 
 
     lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
 
     </span> 
 
    <br> 
 
    <br> 
 
    <a href="http://www.stackoverflow.com>Stack Overflow">Stack Overflow</a> 
 
    </div> 
 
    <div id="a" style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll"> 
 
    <div style="height:300px"></div> 
 
    <div style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey;pointer-events:none;"></div> 
 
    <div style="height:2000px"></div> 
 
    </div> 
 
</div>

Answer 2

Я собираюсь отправить это здесь в качестве решения для своих собственных нужд (и очень много в соответствии с решением, предложенным одновременно @sinisake выше) - но я бы до сих пор быть заинтересованы в более общем решении.

(Функция нажмите закомментирована, поскольку песочница не позволит window.open.)

$('#overlay').click(function() { 
 
    alert('visible') 
 
    if ($(this).offset().top < 230 && $(this).offset().top > 180) { 
 
    //window.open($('#link').attr('href'), '_blank'); 
 
    alert($('#link').attr('href'), '_blank'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="back" style="height:400px;width:300px;margin:0 auto;background:lightblue;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;"> 
 
    <div style="padding:20px"><span> 
 
     lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
 
     </span> 
 
    <br> 
 
    <br> 
 
    <a id="link" href="http://www.stackoverflow.com">Stack Overflow</a> 
 
    </div> 
 
    <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll;"> 
 
    <div style="height:300px"></div> 
 
    <div id="overlay" style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey"></div> 
 
    <div style="height:2000px"></div> 
 
    </div> 
 
</div>

Answer 3

Это должно работать:

$('#overlay').click(function(e) { 
 
    if(isElement($("a"),e)){ 
 
    console.log("link clicked"); 
 
    } 
 
}); 
 

 
function isElement($el, e){ 
 
    var xmin = $el.offset().left; 
 
    var ymin = $el.offset().top; 
 
    var xmax = xmin + $el.width(); 
 
    var ymax = ymin + $el.height(); 
 
    
 
    if(e.pageX >= xmin && e.pageX <= xmax && e.pageY >= ymin && ymax >= e.pageY){ 
 
    return true; 
 
    } 
 
    return false; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<div id="back" style="height:400px;width:300px;margin:0 auto;background:lightblue;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;"> 
 
    <div style="padding:20px"><span> 
 
     lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
 
     </span> 
 
    <br> 
 
    <br> 
 
    <a id="link" style="background-color:yellow;" href="http://www.stackoverflow.com">Stack Overflow</a> 
 
    </div> 
 
    <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll;"> 
 
    <div style="height:300px"></div> 
 
    <div id="overlay" style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey"></div> 
 
    <div style="height:2000px"></div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>