倾斜的 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 和直观地使用 skew，但是，类似下面的示例可能对您有用：

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