Question

我在单数时使用焦点标记可以正常工作的链接，但我想使该链接激活div。它也可以很好地激活它，但问题是焦点命令在单击后不会保持活动状态。有没有办法让焦点标签在点击链接后保持活动状态并且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库。

：专注于一个链接

1 个答案: