jquery - 程序选择后 div 内容的大小不一致

Question

我有一个通过使用鼠标或定时事件选择的 tile div。以下是选中和未选中的状态：

未选中的

.selected 应用

.tile
{
    height: 70px;
    padding: 5px 10px 5px 10px;
    margin: 8px auto 0px auto;
    width: 280px;
    background-color: #99b433 !important;
    cursor: pointer;
}

.tile.selected
{
    border-left: 10px #2d89ef solid;
    width: 270px !important;
}

问题是，当我单击磁贴并使用 css 应用类时，这可以正常工作：

// tile click handler
$('.tile').click(function () {
    $('#leftPane').children().removeClass('selected');
    $(this).addClass('selected');
});

但是当每 15 秒后从 ajax 函数调用它时：

$('#' + selectedId).addClass('selected');

我得到（在 chrome 中）：

但是一旦我将鼠标悬停在它上面，它就会回到上面的 .selected 应用图片。

.tile:hover
{
    border: 2px solid #2d89ef;
}

关于这种奇怪行为的任何想法？我已经在 IE 10 和 Safari 中进行了测试，但它并没有在那里进行测试。

编辑（为埃里克）这是设置自动后发生的情况，填充整个宽度：

Answer 1

border-left从您的班级中删除，您.selected也不需要!important：

.tile.selected
{
    width: 270px;
}

http://jsbin.com/izaxuh/10/edit

Answer 2

这是因为你有width: 270px !important;，将宽度设置为auto，它会正常工作。

http://jsbin.com/izaxuh/14