CSS同类不同行为

Question

我很努力地让我的文章提升箱子按照我的意愿工作。第一个盒子按预期工作，我希望之后的每个盒子都能工作。但是，当您将图像悬停在任何框上后，它不会触发悬停类。

我认为问题在于如何在盒子类被徘徊时选择图像类。我会很乐意提供任何帮助！

.ogse-container{ 
 
    margin-top: 150px; 
 
    margin-left: 10px; 
 
    position: relative; 
 
    padding-top: 5px; 
 
    padding-left: 45px; 
 
    padding-right: 45px; 
 
    width: 600px; 
 
    height: 200px; 
 
    background-color: #fff; 
 
    border: 0px solid #666; 
 
    box-shadow: 0px 0px 30px -5px #333; 
 
    text-overflow: ellipsis; 
 
} 
 
.ogse-side{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 45px; 
 
    height: 100%; 
 
    background-color: #a00; 
 
} 
 
.ogse-img{ 
 
    position: absolute; 
 
    height:100px; 
 
    width: 80%; 
 
    left: 10%; 
 
    top: -45px; 
 
    z-index: -1; 
 
    transition: top .2s; 
 
} 
 
.ogse-container:hover .ogse-img{ 
 
    top: -100px; 
 
} 
 

 

 
.ogse-header{ 
 
    text-align: center; 
 
} 
 
.ogse-para{ 
 
    text-align: center; 
 
}

<div class="ogse-container">  
 
    <a href="http://www.swiftpeak.net/"> 
 
     <div class="ogse-img" style="background-image: url('http://c.directlyrics.com/img/upload/example-all-the-wrong-places-artwork-cover.jpg');"> 
 
    </div> 
 
    </a> 
 
    <div class="ogse-side"> 
 
    </div> 
 
    <a href="http://www.swiftpeak.net/"> 
 
    <h2 class="ogse-header">Article header</h2> 
 
    </a> 
 
    <p class="ogse-para">Some sample text about, some important stuff which I can't tell anyone just yet. So i'm just going to have this text be a big mystery.</p> 
 
</div> 
 
<div class="ogse-container"> 
 
    <a href="http://www.swiftpeak.net/"> 
 
     <div class="ogse-img" style="background-image: url('http://c.directlyrics.com/img/upload/example-all-the-wrong-places-artwork-cover.jpg');"> 
 
    </div> 
 
    </a> 
 
    <div class="ogse-side"> 
 
    </div> 
 
    <a href="http://www.swiftpeak.net/"> 
 
    <h2 class="ogse-header">Article header</h2> 
 
    </a> 
 
    <p class="ogse-para">Some sample text about, some important stuff which I can't tell anyone just yet. So i'm just going to have this text be a big mystery.</p> 
 
</div>

Answer 1

我只是调整了HTML和编辑CSS位：

.ogse-container { 
 
    position: relative; 
 
    width: 690px; 
 
} 
 
.ogse-container-inner-side { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 45px; 
 
    height: 100%; 
 
    background-color: #a00; 
 
} 
 
.ogse-container-inner-img { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 80%; 
 
    left: 10%; 
 
    top: -45px; 
 
    transition: top .2s; 
 
} 
 
.ogse-container-inner-img div { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.ogse-container:hover .ogse-container-inner-img { 
 
    top: -100px; 
 
} 
 
.ogse-container-inner-text { 
 
    margin-top: 150px; 
 
    position: relative; 
 
    width: 600px; 
 
    height: 200px; 
 
    padding-top: 5px; 
 
    padding-left: 45px; 
 
    padding-right: 45px; 
 
    background-color: #fff; 
 
    border: 0px solid #666; 
 
    box-shadow: 0px 0px 30px -5px #333; 
 
    text-overflow: ellipsis; 
 
} 
 
.ogse-header, 
 
.ogse-para { 
 
    text-align: center; 
 
}

<div class="ogse-container"> 
 
    <div class="ogse-container-inner-img"> 
 
    <a href="http://www.swiftpeak.net/"> 
 
     <div style="background-image: url('http://c.directlyrics.com/img/upload/example-all-the-wrong-places-artwork-cover.jpg');"></div> 
 
    </a> 
 
    </div> 
 

 
    <div class="ogse-container-inner-text"> 
 
    <div class="ogse-container-inner-side"></div> 
 
    <a href="http://www.swiftpeak.net/"> 
 
     <h2 class="ogse-header">Article header</h2> 
 
    </a> 
 
    <p class="ogse-para">Some sample text about, some important stuff which I can't tell anyone just yet. So i'm just going to have this text be a big mystery.</p> 
 
    </div> 
 
</div> 
 

 
<div class="ogse-container"> 
 
    <div class="ogse-container-inner-img"> 
 
    <a href="http://www.swiftpeak.net/"> 
 
     <div style="background-image: url('http://c.directlyrics.com/img/upload/example-all-the-wrong-places-artwork-cover.jpg');"></div> 
 
    </a> 
 
    </div> 
 

 
    <div class="ogse-container-inner-text"> 
 
    <div class="ogse-container-inner-side"></div> 
 
    <a href="http://www.swiftpeak.net/"> 
 
     <h2 class="ogse-header">Article header</h2> 
 
    </a> 
 
    <p class="ogse-para">Some sample text about, some important stuff which I can't tell anyone just yet. So i'm just going to have this text be a big mystery.</p> 
 
    </div> 
 
</div>