如何在jQuery Selectable拖拽选中时显示div内容？

问题出在你没有针对jQuery Selectable在拖拽选中时添加的状态类调整.inner的透明度。jQuery Selectable会在拖拽套索选中过程中给目标<li>添加ui-selecting类，选中完成后添加ui-selected类，只需在CSS中针对这两个类下的.inner设置opacity: 1即可实现需求。

修改后的CSS代码如下：

#selectable .ui-selecting { background: #0d5a8d; }

#selectable .ui-selected {
background: #0d5a8d;
color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
#selectable li {
  margin: 0px;
  padding: 0px;
  height: 30px;
  font-size: 12px;
  color: grey;
  text-align: center;
  border-style: solid;
  border-color: grey;
  border-width: 1px;
}
.inner {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.inner:hover,
#selectable .ui-selecting .inner,
#selectable .ui-selected .inner { 
  opacity: 1; 
}

说明 #

• 保留原有的.inner:hover规则，确保鼠标悬停时内容可见
• 添加#selectable .ui-selecting .inner：拖拽套索选中过程中，目标元素的内容自动显示
• 添加#selectable .ui-selected .inner：选中完成后，元素内容保持可见

HTML和JavaScript代码无需修改，保持你现有的即可。

内容的提问来源于stack exchange，提问作者Nanni