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

时间：2015-01-05 15:03:28

标签： html css

我有这个按钮：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

5 个答案:

答案 0 :(得分：1)

使用100％的高度和宽度，以及测量直接父级高度的线高。

＆＃13;
＆＃13; 
.tlm-options div > a {
     display: inline-block;
     width: 100%;
     height: 100%;
     line-height: 100px; /* Same as the height of .tlm-options div div */
 }

.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;
  height: 100px
}
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

<强> See the full display here on Fiddle

答案 1 :(得分：1)

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

- 只需删除你的table-cell div

- 让你的主播＃34; A＆＃34;作为表格单元格，它工作正常。整个区域现在都可以点击。

.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>

答案 2 :(得分：0)

在<a>和<div>之间切换 而不是：

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

                    </div>

写：

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

并相应地更改CSS

答案 3 :(得分：0)

只需将链接转换为内嵌块或块元素，并为它们提供100％的高度和宽度。

.tlm-options div > div > a {
     display: block;
     width: 100%;
     height: 100%;
 }

答案 4 :(得分：0)

使链接阻止级别：

.tlm-options a { display: block; }

相关问题
最新问题