傾斜的div懸停問題

Question

我創建了一個傾斜的div，但是遇到了我無法解決的問題，我已經使用了這個命令，但沒有找到任何答案。

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>

JSFiddle version

這裏的問題：

鼠標懸停在div，它徘徊罰款，但在右下角，其中，無所不有（其中溢出隱藏）如果你把鼠標放在角度開始的空白區域，它仍然會徘徊，我怎麼解決這個問題呢？它只適用於div的形狀？

謝謝

Answer 1

你似乎有正確的觀念，同時使用unskew，直觀地使用傾斜，但是，像下面的例子可能會爲你工作：

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>

^{有關更多信息，@哈里已創建了各種各樣的示例here其中您可能會發現有用。}