0

onHover に表示され、onleave で再び非表示になるいくつかのリンクを持つテーブルを作成しようとしていました。この2つの機能を実装しました

<script type="text/javascript">
    function hide(cls, no) {
        var select = '.' + cls + no;
        $(select).hide();
    }
    function show(cls, no) {
        var select = '.' + cls + no;
        $(select).show();
    }           
</script>

私のHTMLコードは

<tr onmouseenter="show('inv', 1)" onmouseleave="hide('inv', 1)" >   
    <td width="30%">
            <a class="single_image" href="img/img1-big.png"><span class="icon-picture"></span> Image1.jpg</a>
        </td>
        <td width="40%" align="center">
        <div class="button-col">
            <a href="#" class="inline-buttons inv1"><span class="icon-pencil"></span> Rename </a>
            <a href="#" class="inline-buttons inv1"><span class="icon-arrow-down"></span> Download </a>
            <a href="#" class="inline-buttons inv1"><span class="icon-share"></span> Share </a>
            <a href="#" class="inline-buttons inv1"><span class="icon-trash"></span> Delete </a>
        </div>
    </td>
</tr>

Bootstrap フレームワークを使用しています。このコードは IE9 と Firefox で完全に動作します

4

1 に答える 1

2

およびイベントはmouseenter、mouseleavechrome (およびその他のブラウザー) では使用できません。jQuery など、これを正規化する JavaScript フレームワークを使用する必要があります。

jQuery を使用して、次のようなものを試してください。

<tr data-no="1" data-cls="inv">

と：

$(function() {
    $('tr').each(function() {
        var $target = $('.' + $(this).data('cls') + $(this).data('no'));
        $(this).hover(
            function() { $target.show(); },
            function() { $target.hide(); }
        );
    });
});

詳細情報.hover(): http://api.jquery.com/hover/

互換性に関する詳細情報: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter#Browser_compatibility

于 2013-07-30T23:50:31.573 に答える