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

Question

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

未.选中

.选择应用

.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 applied pic。

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

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

编辑(埃里克)这是设置自动后发生的事情，填满整个宽度:

Answer 1

从 .selected 类中删除 border-left 并且您也不需要 !important:

.tile.selected
{
    width: 270px;
}

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