六角形が四角形に変更されたときにCSSホバー効果が機能しない

形状が四角形に変更されたときにホバー効果を表示しない六角形のグリッドがあります。私はこのライブラリのエフェクトを使用していますhttps://github.com/IanLunn/Hover（https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css）誰でもこれを修正する方法を知っていますか？六角形が四角形に変更されたときに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> 
 
\t <ul class="grid"> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 

 
\t </ul> 
 
</body> 
 
</html>

出典

2017-08-08 Magearlik

あなたが唯一 '使用することができ、このライブラリでのCSSホバー効果のいずれかを使用することができるはずです意味します'：ホバー'を持つもの。 –

私はホバーは、モバイルデバイス上で動作しないと思います。理由：hoverはアクティブにするためのポインタが必要です。あなたが携帯用:active疑似クラスを使用する必要があります There are more details here

出典

2017-08-08 04:23:54

ウィンドウが768ピクセルに縮小されるまでは、六角形が四角形で表示されるまで動作します。 – Magearlik

が:hover

のinstedまた、それはまた、心の中でiphoneのためのこの特定の動作キープcursor: pointer;

を置くために良いことだ - How to make my 'click' function work with iOS

出典

2017-08-08 06:32:18

[OK]を、私が見つかりました。問題。それはバックグラウンドエフェクトのZ-インデックスと関係します。たとえばhvr-shutter-out-horizontalの場合、CSSクラス.hvr-shutter-out-horizontal:before { }では、z-indexを-1の代わりに5に変更します。次に.grid li .hexagon.img1 .textでz-index：10のようなより高いzインデックスに変更して、テキストを前面に表示するようにします。ここに働く解決策。あなたがあなたの指で保持している場合、モバイルにhover`：この修正プログラムを使用すると、https://github.com/IanLunn/Hover

/* grid of hexagons */ 
 

 
.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; 
 
    z-index: 10; 
 
\t position: relative; 
 
} 
 
.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; 
 
    z-index: 10; 
 
\t position: relative; 
 
} 
 
.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; 
 
    z-index: 10; 
 
\t position: relative; 
 
} 
 
.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: 5; 
 
    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: 5; 
 
    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: 5; 
 
    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: 5; 
 
    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> 
 
\t <ul class="grid"> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href=""><div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div></a> 
 
\t \t </li> 
 

 
\t </ul> 
 
</body> 
 
</html>

出典

2017-08-11 09:13:38 Magearlik

六角形が四角形に変更されたときにCSSホバー効果が機能しない

答えて

関連する問題