在 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
    }
});

出于设计目的，我在垂直缩放器的中间放置了一个图标。 这个函数在我的控制器的 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;
    }

问题

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

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

答案

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

Answer 1

对于悬停方面，我在我的样式上实现了 class .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;
    }

我在 .ui-layout-resizer-dragging class 上面使用了 display: none，所以当我拖动缩放器时会显示图标。

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

Buttons placed on resizer disappears when resizing on jQuery Layout Plugin

javascript

css

jquery

jquery-ui

jquery-plugins

问题

答案