单击后用于输入类型文件保留悬停状态的元素

Question

我创建了一个简单的输入类型文件占位符，如下所示：

input[type="file"] {
  display: none;
}
.image .first {
  display: none;
}
.image .second {
  display: block;
}
.image:hover .first {
  display: block;
}
.image:hover .second {
  display: none;
}

<div class="image">
  <input type="file" id="file-input" />
  <label for="file-input">
    <div class="first" style="height: 40px;background-color: red;"></div>
    <div class="second" style="height: 40px;background-color: blue;"></div>
  </label>
</div>

每当我将鼠标悬停在.image元素上时，我需要显示.first并隐藏.second。如果我没有点击file-input标签，那就会成功。

然而，当点击file-input标签时，即使在导航后，悬停状态仍然存在（红色div显示）。

这是pen.