CSS gleiche Klassen unterschiedliches Verhalten

Question

Ich habe Schwierigkeiten mit meinem Artikel Förderung Boxen zu arbeiten, wie ich sie will. Die erste Box funktioniert wie erwartet und ich möchte, dass jede Box danach gleich funktioniert. Wenn Sie das Bild jedoch auf ein beliebiges Feld nach dem ersten bewegen, wird die Hover-Klasse nicht ausgelöst.

Ich denke, das Problem liegt darin, wie die Bildklasse ausgewählt wird, wenn die Box-Klasse in der Schwebe ist. Ich wäre dankbar für jede Hilfe!

.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

ich umstrukturiert nur den HTML-Code und bearbeitet die CSS ein wenig:

.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>