Question

因此，使Lightbox显示非常容易。但如果我再次点击其他地方或 TRIGGER ，我希望将其删除。是什么东西可以在CSS中实现？ JSFIDDLE：http://jsfiddle.net/tgs8fp9v/

HTML：

<a href="#x1">
TRIGGER
  </a>
  <a href="#" id="x1"></a>
  <div class="Info">
    message
  </div>

CSS：

    #x1{
  position: absolute;
  margin-top:calc(25% + 30px);
  margin-left:calc(50% - 280px);

}
#x1:hover{
zoom:1.0101;
}
#x1:target {
    outline: none;
    display: block;
}
#x1:target + .Info {
    display: block;
}
.Info{
    display:none;
    height:50px;
    width:100px;
    position:relative;
    background:#fff;
    z-index:99999999;
    margin-top:calc(20% - 50px);
    margin-left:calc(50% - 250px);
    border:2px solid #88d8d8;

}

Answer 1

是的，您可以使用其他触发器执行此操作。当用户单击另一个触发器时，它会从第一个触发器伪类（在本例中为x1）中删除触发器伪类

http://jsfiddle.net/snlacks/c16zavjz/

<a href="#x1">TRIGGER</a>
<a href="#" id="x1"></a>
<div class="Info">message</div><br>
<a href="#x2">TRIGGER2</a> <!-- or any other id -->

您的CSS可以保持不变。

这是非传统的，如果您要分享您的代码，这一点并不明显。模式通常是使用javaScript从类中的所有类中删除活动类，然后通过id或index为活动类添加特定成员。

用点击删除css灯箱？

1 个答案: