javascript - 在 jQuery 布局插件上调整大小时，放置在调整器上的按钮消失

Question

我在我的网络应用程序中使用 jQuery UI 布局插件 (layout.jquery-dev.net/index.cfm)。

仅使用 3 个面板(中心、西面和北面)，我已将缩放器设置为可调整大小，同时用鼠标在西面面板上拖动。 这个函数在我的 AngularJS 指令中:

$(element[0]).layout({
    north__resizable: false,
    closable: false,
    slidable: false,
    north: {
        spacing_open: 0,
        resizable: false,
        togglerLength_open: 0,
        togglerLength_closed: 0,
        minSize: 30,
        maxSize: 30
    },
    west: {
        spacing_open: 8,
        size: 250,
        minSize: 160,
        maxSize: 600,
        resizable: true,
        resizeWhileDragging: true
    },
    center: {
        spacing_open: 30,
        resizable: false,
        closable: false,
        slidable: false,
        resizeWhileDragging: true
    }
});

出于设计目的，我在垂直缩放器的中间放置了一个图标。 这个函数在我的 Controller 的 init() 上:

    _self.setResizableLayout = function() {
        $timeout(function () {
            $('.ui-layout-resizer-west').attr('ng-attr-title', "{{'drag' | translate}}");
            $('.ui-layout-resizer-west').append(
                '<span class="icon-dots-three-horizontal3" style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 5px; display: block; position: absolute; top: 50%; margin-left: -4px; opacity: 0.6; visibility: visible!important;"></span>');
        }, 200)
    }

此外，每当鼠标悬停并单击缩放器时，都有 :hover 和 :active 样式:

.ui-layout-resizer-west {
    border-left: 1px solid #dadee3;
    background: #f0f3f8;
    border-right: none;
    width: 8px !important;

    &:hover, &:active {
        border-right: 1px solid #dadee3;
        background: #E1EAF2;
        cursor: move !important;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        border-right: 1px solid #dadee3;
    }

问题

---

1. 每当我单击开始拖动垂直缩放器时，移动一点点后，图标就会消失。它只会在松开鼠标按钮时再次出现。
2. 每当我拖动调整器时，:hover 效果会在光标未悬停在元素上时丢失(例如将调整器拖动到其极限并进一步移动光标，而鼠标按钮是仍然按下)。似乎它忽略了 :active 选择器。

问题:是否有任何解决方法可以使图标始终显示并在拖动调整大小器时保持 :hover 样式？

答案

---

1. display: none 成功了。
2. 仔细阅读了文档，并在拖动调整器时使用我想要的样式实现了 css 类 .ui-layout-resizer-dragging。

Answer 1

对于悬停方面，我实现了类 .ui-layout-resizer-dragging在我的风格上与我的风格相同 :hover和 :active选择器(也许最后一个现在没用了):

        &:hover, &:active {
            background: #E1EAF2;
            cursor: move !important;
            cursor: -moz-grab !important;
            cursor: -webkit-grab !important;
            border-right: 1px solid #dadee3;
        }
    }
    .ui-layout-resizer-dragging { /* resizer beging 'dragging' */
        background: #E1EAF2;
        cursor: move !important;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        border-right: 1px solid #dadee3;
        display: none;
    }

我用了display: none在 .ui-layout-resizer-dragging 上类如上所示，因此当我拖动缩放器时会显示该图标。