css - div 突出显示不会转换为 div 的新位置

Question

我正在使用ui-state-highlighton突出显示一个 div 并在鼠标事件mouseover上缩进它。clickdiv 未缩进时完美突出显示，但缩进后突出显示仍根据 div 的先前位置。突出显示/缩进的 div 是一个可排序元素。我知道这可能与 CSS 有关，但我是个菜鸟！

代码;

<style>
      .ui-state-highlight {border: 4px solid #ffffa1;}
      .indent { margin: 0; padding-left: 10px; }
</style>

鼠标点击；

if ($('#'+(parseInt(pushpin._text))).prop('class') == "indent ui-state-highlight" || $('#'+(parseInt(pushpin._text))).prop('class') == "ui-state-highlight indent"){  
    $('#'+(parseInt(pushpin._text))).removeClass("indent"); 
}
else{
    $('#'+(parseInt(pushpin._text))).addClass("indent");
}

鼠标悬停时

$('#'+(parseInt(pushpin._text))).addClass("ui-state-highlight")

Answer 1

尝试使用margin-left而不是padding-left.

内边距是内容和元素边框之间的空间。您想要的是将元素“移动”到右侧。

Answer 2

只需将 CSS 更改为：

.ui-state-highlight, .ui-state-highlight.indent {border: 4px solid #ffffa1;}
.indent { margin: 0; padding-left: 10px; }

应该是特异性问题。