Question

我在ui-state-highlight上使用mouseover突出显示div，并在鼠标click事件上缩进。当div没有缩进时，div会被完美地突出显示，但是一旦缩进高亮仍然是根据div的先前位置。突出显示的/缩进的div是一个Sortable元素。我知道这可能与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; }

应该是特异性问题。

Div高亮不会转化为div的新位置

2 个答案:

只需将CSS更改为：