Question

这看起来应该是可能的，但解决方案已经让我无法忍受太久了。您是否可以通过使用混合混合模式在可滚动div中切出的孔来显示可在背景中点击的链接？我已经尝试了pointer-events:none的常用技巧，但这并不起作用，因为“洞”＆＃39;是不是真的透明，也可能是因为背景实际上是两个级别。

到目前为止，这是我的代码：

＆＃13;

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

＆＃13;

如果你滚动内容，你会看到背景内容进入查看 - 带有链接 - 但我无法弄清楚如何使链接可点击（如果可能的话）。< / p>

感谢您的任何建议。 JS / Jquery解决方案没问题，但直接CSS是首选。

Answer 1

mix-blend-mode CSS属性描述元素的内容应如何与元素的直接父元素的内容和元素的背景混合。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

混合模式只是提供了混合图层颜色的可视方式，但DOM仍然是相同的。因此，在您接近它的方式中，没有可能点击那个视觉“洞”。

您需要使用JavaScript实际触发元素后面的链接中的点击。

使用CSS，我发现有一个点击选项。你可以使用 pointer-events：none;这可以使链接背后可点击。但是，它会使元素无法响应任何鼠标事件，包括滚动。

#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>

点击一个“洞”＆＃39;使用混合混合模式切割

3 个答案: