我有以下标记:
<li class="menu-option">
<a class="menu-option-link">File</a>
<input class="menu-option-upload-input" type="file">
</li>
以下样式:
.menu-option {
position: relative;
width: 100%;
border-bottom: 1px solid #c7d0d9;
}
.menu-option-link {
display: inline-block;
width: 100%;
color: #000000;
text-decoration: none;
padding-left: 8px;
font-size: 14px;
line-height: 36px;
}
.menu-option-link:hover {
background: green;
}
.menu-option-upload-input {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
opacity: 0;
z-index: 1;
}
所以基本上输入是隐藏的,但占据了li.menu-option
的整个宽度和高度。当我在a.menu-option-link
上空盘旋时,我希望它悬停,但点击后我想触发特定于input
的操作。这可能吗?
答案 0 :(得分:0)
你可以试试这个。
.menu-option {
position: relative;
width: 100%;
border-bottom: 1px solid #c7d0d9;
}
.menu-option:hover .menu-option-link{color:red;background:#ddd}
.menu-option-link {
display: inline-block;
width: 100%;
color: #000000;
text-decoration: none;
padding-left: 8px;
font-size: 14px;
line-height: 36px;
}
.menu-option-upload-input {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
opacity: 0;
z-index: 1;
}
<div class="someBox"></div>
<ul>
<li class="menu-option">
<a class="menu-option-link">File</a>
<input class="menu-option-upload-input" type="file">
</li>
</ul>
答案 1 :(得分:0)
您好,因为您曾经absolute
position
并定义z-index
1
现在定义您的
.menu-option-link
类 position
relative
和z-index
2
就像这样
.menu-option {
position: relative;
width: 100%;
border-bottom: 1px solid #c7d0d9;
}
.menu-option-link {
display: inline-block;
width: 100%;
color: #000000;
text-decoration: none;
padding-left: 8px;
font-size: 14px;
line-height: 36px;
position:relative;
z-index:2;
}
.menu-option-link:hover {
background: green;
}
.menu-option-upload-input {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
opacity: 0;
z-index: 1;
}
&#13;
<li class="menu-option">
<a class="menu-option-link">File</a>
<input class="menu-option-upload-input" type="file">
</li>
&#13;