在悬停

Question

我是新来的:)希望我可以提供一些帮助。我对css，网页设计和编码以及一切都很陌生。我正在从事某种网站项目，我遇到了一个问题。问题是当我在低屏幕分辨率[800 * 600]上悬停父div时，由于某些原因在google-chrome中它显示了子div的边框底部，虽然没有定义底边框但无论如何我不想要它到那里。检查代码，它可能是一团糟所以我很高兴有任何其他评论，如果any1有任何。或者换句话说，当i：hover .absection出于某种原因，所有.ability得到了底部边界，虽然它没有被定义但不应该在那里。正如我已经说过的，它只发生在160 * 600 res的chrome上，而不是在IE中而不是在FF中。这是代码

HTML

`<div class="rightsection">
<h2 class="abilities">
<img src="logosmall.png" alt="" class="h2img"/>Some header</h2>
<div class="absection"> <div class="ability">
<img src="brainwave.svg" alt="some alt text">
<div class="closed-content">
<h2>HEADER</h2>
</div>
<div class="opened-content"><h2>HEADER</h2><p>Some more other content</p>
<div class="moreinfo">More</div></div>
</div>`

CSS

`.abilities {
text-align: center;
}
.ability {
display: inline-block;
position: relative;
background-color: #ffffff;
margin-top: 2vw;
margin-right: 0.5vw;
margin-left: 0.5vw;
width: 15vw;
height: 40vh;
text-align: center;
overflow: hidden;
}
.ability .closed-content h2 {
font-size: 2vw;
text-align: center;
padding-top: 3.5vh;
}
.ability .opened-content h2 {
font-size: 2vw;
text-align: center;
padding-top: 3.5vh;
}
.ability img {
z-index: 99;
width: 3.5vw;
position: absolute;
margin-top: 8vh;
left: 40%;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
.ability .closed-content {
z-index: 1;
padding: 0;
background-color: #4D4343;
height: 100%;
width:100%;
left: 0;
position: absolute;
webkit-transition:all .5s ease-out;
moz-transition:all .5s ease-out;
transition:all .5s ease-out;
border-color: #E8C71A;
border-bottom-style:double;
border-width: 2vh;
}
.ability .opened-content {
z-index: 0;
text-align: center;
bottom: -73.5%;
position: absolute;
background-color: #000;
height:73.5%;
width:100%;
left:0;
border-bottom: 0.5vh solid white;
webkit-transition:all .5s ease-out;
moz-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.ability .opened-content .moreinfo {
font-size: 1.2vw;
display: inline-block;
width: 40%;
margin-top: 25%;
border: 0.2vh solid #C7DDF1;
padding-top: 1.5vh;
padding-bottom: 1.5vh;
padding-left:1vh;
padding-right:1vh;
}`

悬停效果和媒体查询

`.ability:hover img {
margin-top: 2vh;
}
.ability:hover .closed-content {
margin-top: -100%;
}
.ability:hover .opened-content {
margin-bottom: 100%;
}
@media screen and (max-width: 1024px) {
.ability:hover .closed-content {
margin-top: -132.5%;
}
.ability:hover .opened-content {
margin-bottom: 134%;
}
.ability {
margin-left: 0.3vw;
margin-right: 0.3vw;
}`

是的，抱歉这个长度。我的第一个问题，所以我希望你有耐心并帮助我，不知何故o.0。 Tnx提前很多...... J.o。