*用链接集中精力

Question

当单数时，我拥有的链接与focus标记工作得很好，但是我想让这个链接激活一个div。它也可以很好地激活它，但问题是在单击它之后，focus命令不会保持活动状态。在单击链接并激活div之后，是否有方法使焦点标记保持活动状态，而一般情况下没有任何JQuery或Java？

下面是CSS：

a.clicker:link {
height: 449px;
width: 600px;
position: fixed;
bottom: 0px;
right: 0px;
-o-transition: 3s;
-ms-transition: 3s;
-moz-transition: 3s;
-webkit-transition: 3s;
background-size: cover;
background-repeat: no-repeat;
background-image: url('');
background-color: #000;
}
a.clicker:focus {
opacity: 0 !important;
right: -400px !important;
}

.div {
height: 500px;
width: 700px;
border: 2px solid #a9a9a9;
position: fixed;
top: 70px;
left: -650px;
opacity: 0;
-o-transition: 3s;
-ms-transition: 3s;
-moz-transition: 3s;
-webkit-transition: 3s;
}
.div:target {
top: 70px;
left: 300px;
opacity: 1;
}

这是html：

<a href="#01" class="clicker"></a>
<div id="01" class="div">

Answer 1

这不能单靠CSS来完成。

一旦有人点击其他地方，链接就不再是焦点，因此该规则不再适用。如果希望在焦点上永久应用样式更改，则需要使用javascript/jquery并使用onFocus或onClick更改css。

对于jQuery (我知道您专门要求不使用jQuery，但为了完整起见)：

$(document).ready(function() {
    $('.clicker').click(function(event) {
        $(this).css("opacity", "0!important");
        $(this).css("right", "-400px!important");
    });
});

未经测试，这是一个近似，可能不会100%开箱即用。注意-您必须包括jQuery库。