Question

当用户悬停在元素上时，我希望在不同的div上触发悬停事件。

HTML

<div id="SubmitTabs">Hover here</div>

<div id="UploadedFile">Hover event will trigger here</div>

的CSS

#UploadedFile {
    background-color:blue;
}

    #UploadedFile:hover {
        background-color: black;
    }

我已尝试过这两种方法：

<script>
        $(document).ready(function() {
            $("#SubmitTabs").hover(function () {
                $("UploadedFile").mouseover();
            });

            $('#SubmitTabs').on('mouseenter mouseleave', function (e) {
                $('UploadedFile').trigger(e.type);
            })
        });
    </script>

为什么世界上这不起作用..？

谢谢.. !!!

编辑1：我悬停时警报正在运行

http://jsfiddle.net/nRYra/16/

提醒无效？

Answer 1

你可以在css中做这样的事吗？

#SubmitTabs:hover + #UploadedFile {
  background-color: black;
}

编辑：修正了你的小提琴 http://jsfiddle.net/nRYra/17/

#UploadedFile {
    border-style: solid;
    border-width: 1px;
    width: 80px;
    padding-top: 18px;
    border-color: #f9f9f9;
    cursor: pointer;
}

#SubmitTabs:hover + #UploadedFile {
            background-color: #e5f3fb;
        border-style: solid;
        border-width: 1px;
        border-color: #70c0e7;
}

Answer 2

你很亲密：

    $(document).ready(function() {
        $("#SubmitTabs").hover(function () {
            $("#UploadedFile").trigger('mouseover');
        });

        $('#UploadedFile').on('mouseover', function (e) {
            alert('alerted from hovering over Submit Tab');
            $(this).css({ 'color' : '#000' });
            // do anything you want
            $(this).addClass('hover');
        })
    });

Answer 3

试试这个。

$(document).ready(function() {
        $("#SubmitTabs").on('mouseenter mouseleave',function () {
            $("#UploadedFile").toggleClass('hover');
        });
    });

在css上做你的东西

jQuery触发器悬停在不同的元素上

3 个答案: