程序選擇后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');

我得到（鍍鉻）：

但是，一旦我將鼠標懸停在它上面，它就會回到上面的.selected應用圖片。

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

對這種奇怪的行為有什么想法嗎？ 我已經在IE 10和Safari中進行了測試，但並沒有在那做。

編輯（對於eric）這是在設置自動並填充整個寬度后發生的情況：

Answer 1

從.selected類中刪除border-left ，也不需要!important ：

.tile.selected
{
    width: 270px;
}

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

Answer 2

這是因為您有width: 270px !important; ，將寬度設置為auto ，即可正常使用。

http://jsbin.com/izaxuh/14