why I can't click this link inside :focus? the link always immediately closed when I try to click them.
为什么我不能点击里面的这个链接:焦点?当我尝试点击它们时,链接总是立即关闭。
if possible, I prefer to use only CSS, but if someone can give tips with simple javascript or jquery, that's would be great.
如果可能的话,我更喜欢只使用CSS,但如果有人可以提供简单的javascript或jquery提示,那就太棒了。
this is my code
这是我的代码
.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://*.com">
<span class="more">
Read More
</span>
</a>
</div>
</div>
<div class="clearfix" />
</div>2 个解决方案
#1
0
Your link "Read more" is expanded when <div class="cont"> have focus. When you click on "Read more", your div loose focus and "Read more" is hide
当
具有焦点时,会扩展您的“阅读更多”链接。当你点击“阅读更多”时,你的div松散焦点和“阅读更多”是隐藏
#2
0
$('.kirig').click(function(){
$('.kirip').toggle();
});
#1
0
Your link "Read more" is expanded when <div class="cont"> have focus. When you click on "Read more", your div loose focus and "Read more" is hide
当
具有焦点时,会扩展您的“阅读更多”链接。当你点击“阅读更多”时,你的div松散焦点和“阅读更多”是隐藏
#2
0
$('.kirig').click(function(){
$('.kirip').toggle();
});