我有一个六边形网格，当它们的形状变为正方形时不显示悬停效果。我正在使用此库中的效果 https://github.com/IanLunn/Hover ( https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css ) 有谁知道如何解决这个问题？
如有任何帮助，我们将不胜感激。干杯................................................. ..................................................... ..................................................... …………
/* grid of hexagons */
.hex-background {
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.hex-background .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.hex-background:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
.grid li {
list-style-type: none;
position: relative;
float: left;
width: 18%;
padding-bottom: 20.78461%;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
.grid li:nth-child(2n) {
margin: 0 1%;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: -4.5%;
margin-bottom: -4.5%;
-o-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-moz-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-webkit-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(48%) rotate(-60deg) skewY(30deg);
transform: translateX(48%) rotate(-60deg) skewY(30deg);
}
.grid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
/*background images*/
}
.grid li .hexagon.img1 {
background: url("https://c2.staticflickr.com/6/5560/15235542331_fbe56a772e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img1 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img1:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img2 {
background: url("https://c2.staticflickr.com/8/7490/16150657349_cf9be4ce7e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img2 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img2:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img3 {
background: url("https://c2.staticflickr.com/6/5205/5262879347_26a831f439_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img3 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img3:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li * {
visibility: visible;
}
.grid li p {
transform: translateY(100%);
text-align: center;
color: #fff;
}
.clear:after {
content: "";
display: block;
clear: both;
}
@media only screen and (max-width: 768px) {
.grid li {
display: inline-block;
width: 49%;
padding: 0;
height: 35%;
padding-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
overflow: visible;
visibility: visible;
padding-bottom: 2%;
}
.grid li:nth-child(2n+1) {
margin-right: 2%;
}
.grid li:nth-child(2n) {
margin: 0 0%;
}
.grid li .hexagon {
position: relative;
top: none;
left: none;
width: 100%;
height: 200px;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: 0%;
margin-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
@media only screen and (max-width: 400px) {
.grid li {
display: inline-block;
width: 100%;
height: 35%;
padding-bottom: 10px;
}
.grid li:nth-child(2n+1) {
margin-right: 0%;
}
}
/*hover effects*/
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.2.0
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Hover.css Copyright Ian Lunn 2017. Generated with LESS.
*/
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Radial Out */
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover,
.hvr-radial-out:focus,
.hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover,
.hvr-shutter-out-horizontal:focus,
.hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before,
.hvr-shutter-out-horizontal:focus:before,
.hvr-shutter-out-horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}<!doctype html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css">-->
</head>
<body>
<ul class="grid">
<li>
<a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img1 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img2 hvr-sweep-to-right"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img3 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img1 hvr-radial-out"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img2 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img3 hvr-sweep-to-right"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img1 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img2 hvr-radial-out"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img3 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a>
</li>
<li>
<a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a>
</li>
</ul>
</body>
</html>最佳答案
我认为悬停不适用于移动设备。因为 :hover 需要一个指针来激活。 There are more details here
关于当六边形更改为正方形时，CSS 悬停效果不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45559208/