【发布时间】：2019-10-28 05:20:54
【问题描述】：
我有 5 行是倾斜的。
其中三个应该显示一个未倾斜的背景图像，一旦悬停就会有一个链接。
目前这种认识存在一些问题：
1). 一旦鼠标光标位于文本块或 Font Awesome 图标上 - 背景图像就会隐藏。这很自然，因为文本块在可点击区域上方，但我还没有找到好的解决方案。
2). 小问题 - 显示的背景图像和文本块的项目倾斜。它们应该是直的，无需应用转换。
工作示例is here
标记：
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-heart-o" fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="#" title="Dipsum" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-map-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="#" title="Get in touch with us" target="_self">
<div class="oblique last">
<span class="fa fa-comment-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Get in touch <br /> with us</span>
</div>
</a>
</div>
CSS：
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.oblique img:hover ~ .oblique{z-index:-100!important;display:none!important!;}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block > a:nth-child(even) > div:nth-child(1) {
background: #E0AE51;
}
.oblique-block > a:nth-child(odd) > div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa{
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text{z-index:5;}
UPD：通过 Oliver 的解决方案，我已经实现了目标。但是还有一个问题：Font Awesome、文本和显示的图片是倾斜的，而它们应该是直的。
UPD2通过多次变换解决transform: translate(-50%, -50%) skewx(10deg);
【问题讨论】：
-
如果您将悬停元素移动到倾斜类，它看起来如何 - 这样它包含所有子元素？
.oblique:hover img { opacity: 1.0; filter: alpha(opacity=100); }
标签： css hover css-transforms skew