突出显示悬停时隐藏输入下的链接

Question

我有以下标记：

<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的操作。这可能吗？

Answer 1

你可以试试这个。

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

Answer 2

您好，因为您曾经absolute position并定义z-index 1现在定义您的 .menu-option-link 类 position relative和z-index 2

就像这样

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;