1

这看起来应该是可能的，但解决方案让我想了太久。您可以使用混合混合模式在通过可滚动 div 中的孔切割显示的背景中制作可点击的链接吗？我尝试了通常的技巧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 是首选。

4

3 回答 3

1

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

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

混合模式只是提供混合图层颜色的视觉方式，但 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>

于 2016-12-21T00:31:11.680 回答
0

我将在这里发布这个作为我自己需求的解决方案（并且非常符合上面@sinisake 同时提出的解决方案） - 但我仍然对更通用的解决方案感兴趣。

（因为沙箱不允许，所以注释掉了 click 函数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>

于 2016-12-21T02:18:40.463 回答
0

这应该有效：

$('#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>

于 2016-12-21T11:05:44.870 回答