0

入力タイプのファイル要素を再スキンしようとしています。

これを行うには、2 つの要素を重ね合わせます。1 つは入力タグで、もう 1 つはナイス ボタンです。このようなもの：

<input type="file" id="filesButton" multiple>
<input type="button" id="filesButtonOverlay" value="Add Files">

ボタンには、ユーザーがホバーしたり、クリックしたりすると、いくつかの素晴らしい効果があります (すべて CSS で行われます)。ただし、input-type-file の z-index の方が高いため (クリックをエミュレートできないため、そうする必要があります)、これらの効果はすべて表示されません。

input-type-file が取得してボタンでトリガーするすべてのイベントを委任する良い方法はありますか?

4

2 に答える 2

0

入力を div でラップし、イベントを div に添付するとどうなるでしょうか? 次に、変更を加えてボタンをターゲットにしますか?

于 2012-04-25T21:21:02.233 に答える
0

共有の親とこれを行うことができるはずだと思います。次にhover、ボタン自体ではなく親に配置します。

<span id="wrapper">
    <input type="file" id="filesButton" multiple>
    <input type="button" id="filesButtonOverlay" value="Add Files">
</span>

$("#wrapper").hover(function(){
    $("#filesButtonOverlay").dosomething();
});

またはCSSで：

#wrapper:hover #filesButtonOverlay{
  stuff:
}

同じページに複数ある可能性がある場合は、ids の代わりにクラスを使用するように変更する必要があります。

于 2012-04-25T21:21:26.500 に答える