ホバリング後のCSSホバー要素親要素

Question

2つの背景画像を持つ分割画面があります。それぞれの側にはimage.pngとimage-hover.pngがあります。私は、image-hover.pngをimage.pngの上に置いて、カーソルを背景画像またはimage.pngのどちらかに置いてみたいと思います。

私はこれを行うことができますが、バックグラウンドイメージにカーソルを置くと、ホバーがimage.png上でアクティブになり、カーソルをimage.png上にドラッグするとホバーが消えます。ここで

は私のページです：http://loopaa.com/split/

ここで、それは私のコードです：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800'); 
 

 
html, body { 
 
    height: 100%; 
 
    min-height: 18em; 
 
background: linear-gradient(90deg, #534591 50%, #e2d649 50%); 
 
} 
 

 

 
.stanga { 
 
    background-image: url("http://loopaa.com/split/left-side.png"); 
 
    height: 100%; 
 
} 
 
    
 
.dreapta { 
 
    background-image: url("http://loopaa.com/split/right-side.png"); 
 
    height: 100%; 
 
} 
 

 
.split-pane { 
 
    padding-top: 22%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    height: 100%; 
 
    font-size: 2em; 
 
    color: white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight:300; 
 
} 
 

 

 
.split-pane > div { 
 
    position: relative; 
 
    top: 40%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
} 
 
.split-pane > div .text-content { 
 
    line-height: 1.6em; 
 
    margin-bottom: 1em; 
 
} 
 
.split-pane > div .text-content .big { 
 
    font-size: 2em; 
 
    text-decoration:none; 
 
} 
 

 

 
#cf{margin: auto; 
 
    width: 400px;} 
 

 
#cf .left-cheery{ 
 
    width: 400px; 
 
    height: 360px; 
 
    background: url(http://loopaa.com/split/cc.png); 
 
    border:0; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.stanga:hover .left-cheery{ 
 
    background: url(http://loopaa.com/split/cc-hover.png) !important; 
 
    transition: all 1s ease-in; 
 
} 
 

 

 

 

 

 

 
#cf .right-cheery{ 
 
    width: 400px; 
 
    height: 360px; 
 
    background: url(http://loopaa.com/split/cc2.png); 
 
    border:0; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.dreapta:hover .right-cheery{ 
 
    background: url(http://loopaa.com/split/cc2-hover.png) !important; 
 
    transition: all 1s ease-in; 
 
} 
 

 

 

 
.split-pane button, .split-pane a.button-left, .split-pane a.button-right { 
 
    font-family: 'Open Sans', sans-serif; 
 
\t font-weight:800; 
 
    background: none; 
 
    border: 1px solid #3b3277; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    width: 15em; 
 
    padding: 0.7em; 
 
    font-size: 0.5em; 
 
    text-decoration: none; 
 
    color: #3b3277; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    -moz-transition: all 0.2s ease-out; 
 
    -o-transition: all 0.2s ease-out; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
} 
 
.split-pane button:hover, .split-pane a.button-left:hover { 
 
    text-decoration: none; 
 
    background-color: #3b3277; 
 
    border-color: #3b3277; 
 
    cursor: pointer; 
 
} 
 

 
.button-left{border: 1px solid #e1d622 !important;color:#e1d622 !important;margin-bottom:6px;} 
 
.button-left:hover{background-color:#e1d622 !important;color:#3b3277 !important;} 
 

 
.button-right{border: 1px solid #3b3277 !important;color:#3b3277 !important;margin-bottom:6px;} 
 
.button-right:hover{background-color:#3b3277 !important;color:#e1d622 !important;} 
 

 
.uiux-side.split-pane button:hover, .split-pane a.button-left:hover { 
 
    color: #ffffff; 
 
} 
 
.frontend-side.split-pane button:hover, .split-pane a.button-left:hover { 
 
    color: blue; 
 
} 
 

 
#bg-logo{ border-radius: 50%; 
 
\t width: 125px; 
 
\t height: 125px; 
 
    background:#ffffff; 
 
    margin: auto; 
 
    padding-top:38px; 
 
} 
 

 
#split-pane-or { 
 
    font-size: 2em; 
 
    color: white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 43.5%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.big { 
 
    font-size: 2em; 
 
} 
 

 
#slogan { 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 100; 
 
    text-align: center; 
 
    vertical-align: baseline; 
 
    top: 0.5em; 
 
    color: white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 1.4em; 
 
} 
 

 
#slogan img { 
 
    height: 0.7em; 
 
} 
 
.text-content p{ 
 
\t text-transform:uppercase; 
 
\t font-size:1.6rem; 
 
\t font-weight:600; 
 
\t line-height: 140%; 
 
\t margin-top:12px; 
 
} 
 
.big { 
 
\t font-weight:800; 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 
@media only screen and (max-width: 1368px) { 
 
    .split-pane {} 
 
    .split-pane > div .text-content .big {font-size: 1em;} 
 
    .split-pane > div .text-content {line-height: 1em;margin-bottom: 0;} 
 
    .text-content p{margin-top: 8px;font-size: 1.4rem;} 
 
} 
 

 

 

 

 
@media only screen and (max-width: 1025px) { 
 

 
.split-pane{} 
 

 
.split-pane > div .text-content .big {font-size: 1.4em;} 
 

 
#cf .left-cheery{ 
 
    width: 200px; 
 
    height: 180px; 
 
    background: url(http://loopaa.com/split/cc-min.png); 
 
} 
 
.stanga:hover .left-cheery{ 
 
    background: url(http://loopaa.com/split/cc-min-hover.png) !important; 
 
} 
 

 
#cf {width:200px;} 
 

 
#cf .right-cheery{ 
 
    width: 200px; 
 
    height: 180px; 
 
    background: url(http://loopaa.com/split/cc-min.png); 
 
} 
 
.dreapta:hover .right-cheery{ 
 
    background: url(http://loopaa.com/split/cc-min-hover.png) !important; 
 
} 
 
} 
 

 

 
@media (max-width:801px) and (min-width:738px) { 
 
    #bg-logo{display:none;} 
 
    .split-pane {} 
 
    .split-pane > div .text-content {line-height: 1.6em;margin-bottom: 10px;} 
 
} 
 

 

 

 
@media only screen and (max-width: 737px) { 
 
    #bg-logo{display:none;} 
 
    .split-pane {padding-top: 5%;} 
 
    .split-pane > div .text-content .big {font-size: 1em;} 
 
    .split-pane > div .text-content {line-height: 1em;margin-bottom: 0;} 
 
    .text-content p{margin-top: 8px;font-size: 1.4rem;} 
 
} 
 

 

 

 
@media only screen and (max-width:569px){ 
 
    
 
    #cf{display:none;} 
 
    .split-pane > div .text-content .big {font-size: 1em;} 
 
    .split-pane > div .text-content {line-height: 1em;margin-bottom: 0;} 
 
    .text-content p{margin-top: 8px;font-size: 1.4rem;} 
 
} 
 

 
@media only screen and (max-width:568px){ 
 
    
 
    #cf{display:none;} 
 
    .split-pane > div .text-content .big {font-size: 0.9em;} 
 
    .split-pane > div .text-content {line-height: 1em;margin-bottom: 0;} 
 
    .text-content p{margin-top: 8px;font-size: 1rem;} 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Cheerup</title> 
 
    
 
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
    <div class='split-pane col-xs-12 col-sm-6 stanga' id="body-half-color"> 
 
    <div> 
 
     
 
    <div id="cf"> 
 
     <div class="left-cheery"></div> 
 
    </div> 
 
    
 
    <div class='text-content' style="color:#e1d622;"> 
 
     <!--<div class="bold">Photobooth for</div>--> 
 
     <div class='big'>CORPORATE CHEERY</div> 
 
     <p>Oferim experiențe memorabile, pline de zâmbete și veselie,<br /> la orice tip de eveniment business</p> 
 
    </div> 
 
    <a class='button-left'> 
 
     AFLA CUM 
 
    </a> 
 
    </div> 
 
</div> 
 
<div class='split-pane col-xs-12 col-sm-6 dreapta'> 
 
    <div> 
 
    
 
    
 
    <div id="cf"> 
 
     <div class="right-cheery"></div> 
 
    </div> 
 
    
 
    <div class='text-content' style="color:#3b3277;"> 
 

 
     <div class='big'>PRIVATE PARTY CHEERY</div> 
 
     <p>Cu noi, distracția primează în rândul celor alături de care ai ales să<br /> petreci una din cele mai importante zile din viața ta</p> 
 
    </div> 
 
    <a class='button-right'> 
 
     AFLA CUM 
 
    </a> 
 
    </div> 
 
</div> 
 
<div id='split-pane-or'> 
 
    <div id="bg-logo"> 
 
    <img src='http://loopaa.com/split/logo-cheerup-mic.png' /> 
 
    </div> 
 
</div> 
 
    
 
</body>

私は正しく説明し、問題を理解することを願っています。

Answer 1

すべての周りに色の境界線を入れている私は通常、CSSの問題のトラブルシューティングするために行う - 私はここにあなたのコードにそれをやった：

http://jsfiddle.net/kNB3c/429/

次に、あなたはあなたのホバーで失敗している節を参照することができます（あなたが境界線に色付けしたように）上の青いセクションでは失敗しています。＃split-paneまたは

これはあなたの中間ロゴのセクションです。これは幅が約20％に減少する必要がありますまたは、あなたはそのセクションが欲しいと思っています）

ことはでき＃の内部分割ペイン-またはこのような何かに幅プロパティ：

margin-left: auto; 
margin-right: auto; 
left: 0; 
right: 0; 
width: 20%; 

それとも、セクションをより詳細にカーソルを移動できるようにも小さい幅を作る。..

P.S.素敵なデザイン！