示例效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*六边形样式--start*/
.imgBox {
/* overflow: hidden; */
width: 100%;
margin: 0 auto;
padding:0.866% 0;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.imgBox:after {
content: "";
display: block;
clear: both;
}
.hex{
position: relative;
list-style-type: none;
float: left;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
/* -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
-ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
transform: rotate(-60deg) skewY(30deg) translatez(-1px); */
}
.hex *{
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
/* -webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg); */
}
.hex .img {
display: inline-block;
left: -100%;
right: -100%;
width: auto;
/* padding: 22% 10%; */
height: 100%;
border-radius: 50%;
box-sizing: border-box;
margin: 0 auto;
}
.hex {
width: 9.6%; /* = (100-4) / 10 */
padding-bottom: 11.085%; /* = width / sin(60deg) */
}
.hex{
margin-right: 1%;
margin-top: -2.5%;
}
.hex:nth-child(n+1):nth-child(-n+9){
margin-top: 0;
}
.hex:nth-child(17n+10){
margin-left: 5.3%;
}
.hexIn>.mark{
/* display: none; */
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hexIn>.mark:before {
display: block;
position: absolute;
content: '';
width: 100%;
height: 100%;
transform: rotate(-60deg) skewY(30deg) translatez(-1px);
background-color: rgba(0,0,0,.1);
}
.hexIn>.text_box{
display: none;
background-color: #f00;
position: absolute;
top: 36%;
left:114%;
opacity: 1;
z-index: 999;
padding: 0 20px;
}
.hexIn>.text_box *{
position: relative;
}
/*六边形样式--end*/
</style>
<script src="./js/jquery.3.4.1.min.js"></script>
</head>
<body>
<div class="imgBox">
<!-- <div class="hex">
<div class="hexIn">
<img class="img" src="./images/amherst.png">
<span class="mark"></span>
</div>
</div>
<div class="hex">
<div class="hexIn">
<img class="img" src="./images/amherst.png">
<span class="mark"></span>
</div>
</div> -->
</div>
<script>
$(function(){
//页面渲染
var str = ''
for(var i=0;i<19;i++){
str += '<div class="hex">'+
'<div class="hexIn">'+
'<img class="img" src="./images/amherst.png">'+
'<span class="mark"></span>'+
'<div class="text_box">内容</div>'+
'</div>'+
'</div>'
};
$('.imgBox').html(str);
//显示效果
$('.imgBox>.hex').hover(function(e){
$(this).parent().find('.img').css('opacity',.2);
$(this).siblings('.hex').find('.mark').hide();
$(this).parent().find('.text_box').hide();
$(this).find('.img').css('opacity',1);
$(this).find('.mark').show();
$(this).find('.text_box').show();
var domLeft = e.pageX+150;
var winWidth = document.documentElement.clientWidth;
var markWidth = $(this).find('.text_box').outerWidth();
if(winWidth-domLeft <= markWidth){
$(this).find('.text_box').css({
left: 'unset',
right: '114%'
});
};
},function(){
$(this).parent().find('.img').css('opacity',1);
$(this).parent().find('.mark').hide();
$(this).parent().find('.text_box').hide();
})
});
</script>
</body>
</html>
