倾斜的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其中您可能会发现有用。}