Slanted Div Hover Troubles

Question

私はSlanted Divを作成しましたが、私は解決できない問題に遭遇しましたが、私はこれをgoogledしましたが、答えは見つかりませんでした。ここ

JSFiddle version

body { 
 
    background: black; 
 
} 
 

 
#slantedwrapper { 
 
    overflow: hidden; 
 
    margin-left: 50px; 
 
} 
 

 
#slanted { 
 
    display: inline-block; 
 
    /* margin-right:-4px; */ 
 
    width: 400px; 
 
    margin-left: -45px; 
 
    /* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */ 
 
} 
 

 
#slanted a { 
 
    position: relative; 
 
    background-color: #1d1d1d; 
 
    /* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */ 
 
    box-sizing: border-box; 
 
    background-size: cover; 
 
    /* padding:1em; */ 
 
    display: block; 
 
    transform: skewX(-30deg); 
 
    width: 100%; 
 
    min-height: 3.5em; 
 
    text-align: center; 
 
    border-right: 5px solid #20c397; 
 
    height: 150px; 
 
    /* line-height: 110px; */ 
 
    overflow: hidden; 
 
} 
 

 
#slanted span { 
 
    color: white; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    transform: skewX(30deg); 
 
    left: 0; 
 
    width: 100%; 
 
    /* height: 150px; */ 
 
    /* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */ 
 
} 
 

 

 
} 
 

 
} 
 
.current a { 
 
    background:#70cb00; 
 
} 
 
#slanted a img { 
 
    transform: skewX(30deg); 
 
    overflow: hidden; 
 
    margin-top: -20px; 
 
    padding-top: 0px; 
 
    width: 123%; 
 
    height: 123%; 
 
    margin-left: -50px; 
 
    opacity: 0.6; 
 
    -webkit-transition: opacity 0.3s linear 0s; 
 
    -o-transition: opacity 0.3s linear 0s; 
 
    transition: opacity 0.3s linear 0s; 
 
} 
 
#slanted img:hover { 
 
    opacity:1; 
 
} 
 
#caption { 
 
    background-color: #333333; 
 
    width: 100%; 
 
    height: 25px; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 99; 
 
    opacity: 0.7; 
 
    color: #D2D2D2; 
 
    -webkit-transition: background-color 0.3s linear 0s; 
 
    -o-transition: background-color 0.3s linear 0s; 
 
    transition: background-color 0.3s linear 0s; 
 
} 
 

 
/*Combination hover effects*/ 
 
#slanted:hover #caption { 
 
    background-color: #20c397; 
 
    opacity:1.0; 
 
} 
 
#slanted:hover img { 
 
    opacity:1.0; 
 
} 
 

 
/* END OFCombo hover effects*/ 
 
p.nonskew { 
 
    transform: skewX(30deg); 
 
    color: White; 
 
    margin: 0; 
 
    margin-left: 22%; 
 
    padding: 1.5%; 
 
    text-align: left; 
 
    font-size: 0.8em; 
 
}

<div id="slantedwrapper"> 
 
    <div id="slanted"> 
 
    <a href="#"> 
 
     <div id="caption"> 
 
     <p class="nonskew">A Caption: Description</p> 
 
     </div> 
 
     <img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" alt="SLANTED DIV"></a> 
 
    </div> 
 
    <!--end of wrapper--> 
 
</div>

が問題だ：divのオーバー

ホバー、それが正常に置いたが、何もない右下隅、（オーバーフローで隠されている）は、角度が始まる空白の領域にマウスを置くと、まだホバリングしていますが、これはホバリング時にどのように解決しますか？divの形状にのみ適用されますか？

あなたはスキューを使用してunskewで直感的なの両方を使用して、正しい考えを持っているように見える

Answer 1

ありがとう、しかし、以下の例のようなものは、あなたのために働く可能性があります

html { 
 
    background: radial-gradient(#222, blue); 
 
    height: 100%; 
 
} 
 
div.wrap{ 
 
    height: 150px; 
 
    width: 300px; position: relative; 
 
    overflow: hidden; 
 
    } 
 
div.innerwrap { 
 
    height: 100%; 
 
    width: 100%; 
 
    transform: skewX(-30deg); 
 
    position: absolute;top:0;left:0; 
 
    overflow: hidden; 
 
    margin-left: -70px; 
 
    transition: all 0.4s; 
 
    border-right: 5px solid tomato; 
 
    cursor:pointer; 
 
} 
 
div.innerwrap:hover span { 
 
    background: gold; 
 
} 
 
div.innerwrap:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://lorempixel.com/300/300); 
 
    transform: skewX(30deg); 
 
    transform-origin: top left; 
 
} 
 
div span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0%; 
 
    width: 120%; 
 
    transform: skewX(30deg); 
 
    background: red; 
 
    text-align:center; 
 
    transition: all 0.4s; 
 
}

<div class="wrap"> 
 
    
 
<div class="innerwrap"> 
 
    <span>TITLE</span> 
 
</div> 
 
    </div>

^{さらに詳しい情報については、@Harryが有用であると思われるさまざまな例を作成しています。here}