我创建了一个自定义按钮,其div具有独特的边框样式.

我正试图处理’mousedown’以切换边框颜色以给出缩进的幻觉.然后处理’mouseup’以切换回默认值.

问题是当鼠标离开按钮并且’mouseup’被触发时,它不再由div处理.我尝试拦截’mouseleave’,我尝试在点击时添加数据属性(不会更新),我尝试添加一个名为“imclicked”的.addClass临时类(无法使其工作) .

我真的很挣扎.

到目前为止这是我的代码：

function ToggleBorder() {
    // Get Border Colours
    //-----------------------------------
    var top    = $(this).css("borderTopColor"),
        right  = $(this).css("borderRightColor"),
        bottom = $(this).css("borderBottomColor"),
        left   = $(this).css("borderLeftColor");

    // Assign new Colours
    //-----------------------------------
    $(this).css("borderTopColor", bottom);
    $(this).css("borderLeftColor", right);
    $(this).css("borderBottomColor", top);
    $(this).css("borderRightColor", left);
}

$(".main-nav-button").mousedown(ToggleBorder);

$(".main-nav-button").mouseup(ToggleBorder);

$(".main-nav-button").mouseleave(function() {
    // test for mousedown
});

如何切换回mouseleave上的默认边框？

最佳答案 我会在这个上使用addClass()/ removeClass()方法.

首先,定义’default’类和’active’类：

.main-nav-button {
    border: 1px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.active {
    border-color: green yellow red blue;
}

然后在mousedown()上添加这个类,并在mouseup()上删除它.请注意,我还添加了mouseout().当您使用鼠标离开div时,它将删除该类(当mousedown处于活动状态时).

$(function(){
    $(".main-nav-button")
    .mouseup(function() { $(this).removeClass('active'); })
    .mouseout(function() { $(this).removeClass('active'); })
    .mousedown(function() { $(this).addClass('active'); });
});

DEMO

$(function(){
    $(".main-nav-button")
    .mouseup(function() { $(this).removeClass('active'); })
    .mouseout(function() { $(this).removeClass('active'); })
    .mousedown(function() { $(this).addClass('active'); });
});

.main-nav-button {
    float: left;
    padding: 1em;
    border: 5px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.active {
    border-color: green yellow red blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav-button">Button</div>

编辑

根据您的评论,动态地制作它.光标离开时唯一需要检查的是是否触发了mousedown事件.为此,我添加了一个活动类.

$(function () {
    function toggle(elem) {
        var top = elem.css("borderTopColor"),
            right = elem.css("borderRightColor"),
            bottom = elem.css("borderBottomColor"),
            left = elem.css("borderLeftColor");

        elem.css("borderTopColor", bottom);
        elem.css("borderLeftColor", right);
        elem.css("borderBottomColor", top);
        elem.css("borderRightColor", left);
    }

    $(".main-nav-button")
    .mousedown(function () {
        toggle($(this));
        $(this).addClass('active');
    })
    .mouseup(function () {
        toggle($(this));
        $(this).removeClass('active');
    })
    .mouseout(function () {
        if( $(this).hasClass('active') ) {
            toggle($(this));
            $(this).removeClass('active');
        }
    });
});

$(function () {
    function toggle(elem) {
        var top = elem.css("borderTopColor"),
            right = elem.css("borderRightColor"),
            bottom = elem.css("borderBottomColor"),
            left = elem.css("borderLeftColor");

        elem.css("borderTopColor", bottom);
        elem.css("borderLeftColor", right);
        elem.css("borderBottomColor", top);
        elem.css("borderRightColor", left);
    }

    $(".main-nav-button")
    .mousedown(function () {
        toggle($(this));
        $(this).addClass('active');
    })
    .mouseup(function () {
        toggle($(this));
        $(this).removeClass('active');
    })
    .mouseout(function () {
        if( $(this).hasClass('active') ) {
            toggle($(this));
            $(this).removeClass('active');
        }
    });
});

.main-nav-button {
    float: left;
    padding: 1em;
    margin: 1em;
    border: 5px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.nr2 {
    border-color: purple orange cyan black;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav-button">Button</div>
<div class="main-nav-button nr2">Button</div>