jquery - jQuery无法停止传播

我读过几乎所有类似的文章，但无法弄清楚我的情况出了什么问题。
我的工具栏上有一个文件图标，当单击该图标时，将打开一个type=file输入标签以打开本地文件。

    $('#file').click(function() {
      $('#openFiles').css('visibility', 'visible');
    });

    $('#openFiles').on('hover', function(e) {
      e.stopPropagation();
    });

#file:hover {
  transition: all .2s ease-in;
  transform: scale(0.9);
  border: 1px solid blue;
}
#file {
  float: left;
  width: 24px;
  height: 30px;
  margin-left: 4.4%;
  margin-top: 10px;
  background-image: url('public/images/file.png');
}
#openFiles {
  position: relative;
  margin-top: 60px;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="file">
  <input type="file" id="openFiles" name="files[]" multiple />
</div>

我的问题：尽管stopPropagation仍悬停在#openFiles上，却导致#openFiles和#file都发生转换。任何想法？

最佳答案

不确定我是否理解问题，但是您的代码中似乎存在一些误解。

e.stopPropagation仅影响事物的javascript方面。它不会阻止CSS事件的传播。

其次，由于缩放（通过transform）容器元素#file，它也会影响其所有内容，即#openFiles元素。