編程選擇後的div內容大小不一致

我有一個通過使用鼠標或定時事件選擇的tile div。下面是選中和未選中狀態：編程選擇後的div內容大小不一致

不.selected

enter image description here

.selected應用

enter image description here

.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'); 
});

但是，當這從一個Ajax功能，每15秒後叫：

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

我得到（鉻）：

enter image description here

但只要我在它懸停，它會回到上面選擇的應用圖片。

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

關於這種奇怪行爲的任何想法？我已經在IE 10和Safari中進行了測試，並且在那裏沒有做到這一點。

EDIT（埃裏克）這裏是設置自動後會發生什麼，填滿整個寬度：

enter image description here

來源

2013-02-01 sprocket12

你能不能把嘲諷了的jsfiddle與HTML藏漢所以我們可以看一下嗎？ –

@Eric現在就可以做到。 – sprocket12

http://jsbin.com/izaxuh/1/edit - 只是離開它，它會使它看起來5秒後錯誤 – sprocket12

-1

從.selected類刪除border-left，你不需要!important還有：

.tile.selected 
{ 
    width: 270px; 
}

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

來源

2013-02-01 16:55:03 Morpheus

除了刪除其選定的狀態外，還會做些什麼？ –

嘗試，你會看到[http://jsbin.com/izaxuh/10/edit](http://jsbin.com/izaxuh/10/edit） – Morpheus

所有你正在做的是刪除選定的狀態。他想保持選定的狀態。 –

-1

因爲喲你有width: 270px !important;，設置寬度爲auto，它會正常工作。

http://jsbin.com/izaxuh/14

來源

2013-02-01 16:55:31

現在正在填充整個寬度的瓷磚存在不希望的效果...我想要像以前那樣在間隔中放置間隔。 – sprocket12

檢查新的jsbin –

請參閱我上面的編輯。我不希望它填滿整個寬度。 – sprocket12

編程選擇後的div內容大小不一致

回答

相關問題