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>