Question

我几乎读过所有相似的帖子，但无法弄清楚我的情况出了什么问题。我的工具栏上有一个文件图标，点击后会打开type=file输入标记以打开本地文件。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我的问题：将鼠标悬停在#openFiles上会导致#openFiles和#file进行转换，尽管有stopPropagation。有什么想法吗？

Answer 1

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

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

其次，由于您缩放（到transform ）容器元素#file，它也会影响其所有内容，即#openFiles元素。< / p>

jquery无法阻止传播

1 个答案: