html - 扩展指向包含它的 div 的链接

Question

我有这个按钮:

.menu-main-window {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 0;
}
.btn-tlm:hover .tlm-options {
    display: table;
}
.btn-tlm:hover .menu-text {
    display: none;
}
.tlm-options {
    height: 100%;
    position: absolute;
    display: none;
    top:0;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    color: #0089c8;
    border-radius: 20px;
    transition: all 250ms ease-in-out;
}
.tlm-options div {
    display: table-row;
    font-size: 12px;
    border-bottom: 1px solid #0089c8;
    color: black;
    transition: all 250ms ease-in-out;
}
.tlm-options div:last-child div {
    border-bottom: none;
}
.tlm-options div div {
    display: table-cell;
    vertical-align: middle;
}
.tlm-options div div a:hover {
    text-decoration: none;
}
.tlm-options div div a:visited {
    color: inherit;
}
.tlm-options div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: NewJuneBold;
}
.menu-btn {
    width: 90%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: auto;
    border-radius: 20px;
    border: 3px solid White;
    box-sizing: border-box;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 100ms linear;
}
.menu-btn:hover {
    border: 3px solid #0089c8;
    /* Azul Ascendi */
    transition: border 250ms ease-in-out;
}
.menu-btn:hover .menu-text {
    background-color: rgba(255, 255, 255, .8);
    color: black;
    transition: all 250ms ease-in-out;
}
.menu-item-div-top {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
}

<div class="menu-main-window">
    <div class="menu-item-div-top">
        <div class="menu-btn btn-tlm" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
            <div class="menu-text">MENU</div>
            <div class="tlm-options">
                <div>
                    <div> <a href="../somewhere">Option1</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option2</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option3</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option4</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我希望 4 个选项在悬停 div 区域时成为链接，而不仅仅是悬停文本。我怎样才能实现它？

Answer 1

您的问题解决方案如下:-

-- 只需删除您的表格单元格 div

-- 将 anchor “A”设为表格单元格，它工作正常。整个区域现在都可以点击了。

.menu-main-window {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 0;
}
.btn-tlm:hover .tlm-options {
    display: table;
}
.btn-tlm:hover .menu-text {
    display: none;
}
.tlm-options {
    height: 100%;
    position: absolute;
    display: none;
    top:0;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    color: #0089c8;
    border-radius: 20px;
    transition: all 250ms ease-in-out;
}
.tlm-options div {
    display: table-row;
    font-size: 12px;
    border-bottom: 1px solid #0089c8;
    color: black;
    transition: all 250ms ease-in-out;
}
.tlm-options div:last-child a {
    border-bottom: none;
}    
.tlm-options div a {
    display: table-cell;
    width: 100%;        
    vertical-align: middle
}
.tlm-options div a:hover {
    text-decoration: none;
}
.tlm-options div a:visited {
    color: inherit;
}
.tlm-options div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: NewJuneBold;
}
.menu-btn {
    width: 90%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: auto;
    border-radius: 20px;
    border: 3px solid White;
    box-sizing: border-box;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 100ms linear;
}
.menu-btn:hover {
    border: 3px solid #0089c8;
    /* Azul Ascendi */
    transition: border 250ms ease-in-out;
}
.menu-btn:hover .menu-text {
    background-color: rgba(255, 255, 255, .8);
    color: black;
    transition: all 250ms ease-in-out;
}
.menu-item-div-top {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
}


<div class="menu-main-window">
    <div class="menu-item-div-top">
        <div class="menu-btn btn-tlm" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
            <div class="menu-text">MENU</div>
            <div class="tlm-options">
                <div>
                    <a href="../somewhere">Option1</a>
                </div>
                <div>
                    <a href="../somewhere">Option2</a>
                </div>
                <div>
                    <a href="../somewhere">Option3</a>
                </div>
                <div>
                    <a href="../somewhere">Option4</a>
                </div>
            </div>
        </div>
    </div>
</div>