CSS div 悬停以通过另一个拖动的 div 更改颜色

Question

我使用 Jquery Sortable 插件来实现拖放。当将 div 面板从源拖放到目标框时，我希望目标放置容器更改边框和背景。

如果鼠标悬停在具有以下 css 的目标容器上，目标容器 div 会更改边框宽度和背景颜色。有用！但是，如果鼠标拖动另一个 div 并悬停在目标容器上，它就不起作用了。

如何解决？

  .destination-container {
    outline: 2px dashed #afcedc;
  }

  .destination-container:hover {
    outline: 8px dashed #afcedc;
    background-color: lightgray !important;
  }

Answer 1

来自规范 jqueryui：jqueryui

创建一个新类，如：

.destination-container-hover {
  outline: 8px dashed #afcedc;
  background-color: lightgray !important;
}

并将“destination-container-hover”类添加到 ui-droppable-hover 部分：

$( "#droppable" ).droppable({
  classes: {
    "ui-droppable-hover": "destination-container-hover"
  },
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});

由于您没有提供更多代码，我将给您一个来自 jQueryUI 网站的示例。