javascript - 我无法单击焦点 div 内的链接

Question

为什么我不能点击 :focus 中的这个链接？当我尝试点击它们时，链接总是立即关闭。

如果可能的话，我更喜欢只使用 CSS，但如果有人可以使用简单的 Javascript 或 jQuery 提供提示，那就太好了。

这是我的代码:

.ourservices{text-align:center;background-color:grey;padding:3%}
.cont{width:20%;background-color:white;display:inline-block;padding:1%;margin:1%;cursor:pointer;float:left}
.cont:focus{width:40%}
.cont a{display:none;text-decoration:none;color:black;font-weight:700}
.cont a:hover{color:white}
.cont:focus a{display:inline-block}
.cont img{width:100%}
.cont:focus img{width:100%}
.cont p{display:none;width:90%}
.cont:focus p{display:inline-block}
.kirig{width:100%;display:inline-block}
.cont:focus > .kirig{width:50%;float:left}
.kirig img{float:left}
.kirip{width:50%;display:inline-block}
.more{background-color:white;margin:0 auto;border:2px solid grey;display:inline-block;padding: 2% 3%;margin:5%}
.more:hover{background-color:gray;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.clearfix{clear:both}

<div class="ourservices">
<div class="cont kiri" tabindex="0">

<div class="kirig">
<img border="0" src="http://www.mo2properties.com/wp-content/uploads/2016/02/click-here-pointer-md.png" />
</div>

<div class="kirip">
<p>click read more click read more click read more</p>
<a href="http://stackoverflow.com">
<span class="more">
Read More
</span>
</a>
</div>

</div>
<div class="clearfix" />
</div>

Answer 1

您的“阅读更多”链接在 <div class="cont"> 时展开有重点。当您点击“阅读更多”时，您的 div 失去焦点并且“阅读更多”被隐藏