修改

Question

我创建了一个自定义按钮，其div具有独特的边框样式。我试图处理“mousedown＆＃39;切换边框颜色以给出缩进的错觉。然后处理＆＃39; mouseup＆＃39;切换回默认值。

问题是当鼠标离开按钮并且鼠标按下时被解雇了它不再被div处理了。我尝试拦截“鼠标离开”，我尝试在点击时添加数据属性（不会更新），我尝试添加一个名为＆的.addClass的临时类＃34; imclicked＆＃34; （无法让它发挥作用）。

我真的很挣扎。

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

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上切换回默认边框？

Answer 1

我会在这个问题上使用addClass() / removeClass()方法。

首先，定义＆＃39;默认＆＃39;班级和活跃的＆＃39;类：

.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'); });
});

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改

根据您的评论，动态制作。光标离开时唯一需要检查的是是否触发了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');
        }
    });
});

＆＃13;

$(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');
        }
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

处理＆＃39; mouseleave＆＃39;虽然＆＃39; mousedown＆＃39;

1 个答案:

修改