Question

我在我的网络应用程序中使用jQuery UI Layout插件（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类.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，因此拖动缩放器时会显示图标。

在jQuery Layout Plugin上调整大小时，放置在缩放器上的按钮会消失

问题

答案

1 个答案: