时间戳

首页 > 解决方案 > 无法在悬停效果上显示六边形 div 中的项目列表

html - 无法在悬停效果上显示六边形 div 中的项目列表

问题描述

每当用户将鼠标悬停在六边形上时，我都会尝试显示项目列表和按钮。这是我尝试过但失败的方法。我将不胜感激任何帮助

body{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 10vh;
}


.hexagon-grid-container {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    margin: 15vh auto;
    padding: 0;
    list-style: none;
}

.hexagon {
    position: relative;
    width: 140px;
    height: 80.83px;
    background-color: #9fa0a2;
    margin: 44px 2px 0px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 40.41px solid #9fa0a2;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 40.41px solid #9fa0a2;
}

.hexagon-inner {
    position: relative;
    width: 140px;
    height: 78.52px;
    background-color: #c9c9c9;
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

.hexagon-inner:before,
.hexagon-inner:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    z-index: 1;
}

.hexagon-inner:before {
    bottom: 100%;
    border-bottom: 40px solid #c9c9c9;
}

.hexagon-inner:after {
    top: 100%;
    width: 0;
    border-top: 40px solid #c9c9c9;
}
.hexagon-icon {
    position: absolute;
    width: 54px;
    top: -28px;
    z-index: 1;
}

.hexagon-name {
    position: absolute;
    width: 130px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    top: 28px;
    z-index: 1;
}

.hexagon-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 1;
    z-index: 2;
    
}

.todoList {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
}


/* HOVER EFFECT */
.hexagon-inner:hover .hexagon-cover{
    background-color: inherit;
    border-radius: 10px;
    transform: scale(2.2);
}


.hexagon-inner:hover .todoList {
    opacity: 1;
}

.hexagon-inner:hover ul {
    opacity: 1;
}

.hexagon-inner:hover a {
    opacity: 1;
    font-family: inherit;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

/* Media queries */
@media (min-width: 1920px) {
    .hexagon-grid-container {
        width: 1600px;
    }

}

@media (max-width: 1919px) and (min-width: 1280px) {
    .hexagon-grid-container {
        width: 1100px;
    }
}
<body>
    <div class="hexagon-grid-container">
        <li class="hexagon">
            <div class="hexagon-inner">
                <img class="hexagon-icon" src="https://img.icons8.com/doodle/48/000000/clipboard--v1.png"/>
                <span class="hexagon-name">Mouse over</span>
                <div class="hexagon-cover"></div>
                <div class="todoList">
                    <h2>Todos</h2>
                    <ul class="todos">
                        <li>Go to the Gym</li>
                        <li>Do the grocerie</li>
                        <li>Read chapter 2</li>   
                    </ul>
                    <a href="#">Ok</a>
                </div>     
            </div>
        </li>
    </div>
</body>

标签： htmlcss

解决方案

推荐阅读