在翻轉時替換響應div背景並單擊

我在實現如何編碼需要動態背景的div背景時遇到問題。 div具有特定的高度，但寬度是瀏覽器的大小。在翻轉時替換響應div背景並單擊

我有一個div有一個默認的重複所有背景圖案，但是如果一個按鈕被懸停或點擊就會改變。背景不重複，所以我想弄清楚如何讓他們根據div大小的瀏覽器大小來擴展/調整大小。

這是它應該是什麼樣子...默認值：http://i.imgur.com/yMZEZ.png類別1（懸停/按下）：http://i.imgur.com/OMhjT.png

注意缺省是如何重複模式，另一種是全BG。

我的代碼是目前：

$("#select_all").click(function(e) { 
     $("#selected-game").removeClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz'); 
    }); 
    $("#select_minecraft").click(function(e) { 
     $("#selected-game").addClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz'); 
    }); 
    $("#select_terraria").click(function(e) { 
     $("#selected-game").addClass('game_bg_terraria'); 
    }); 
    $("#select_dayz").click(function(e) { 
     $("#selected-game").addClass('game_bg_dayz'); 
    });

HTML代碼

<div id="selected-game"> 
<div class="row"> 
    <div class="ten columns"> 
    <h1>TopTitle</h1> 
     <div> 
     <h4>Selected Game Title</h4> 
     </div> 
    </div> 
</div> 
</div> 
<div id="game-selection"> 
    <div class="select_game"> 
     <button id="select_all" class="demo-change btn btn-info" style="display: inline-block;">Default</button> 
     <button id="select_minecraft" class="demo-change btn btn-info" style="display: inline-block;">Category1</button> 
     <button id="select_terraria" class="demo-change btn btn-info" style="display: inline-block;">Category2</button> 
     <button id="select_dayz" class="demo-change btn btn-info" style="display: inline-block;">Category3</button> 
    </div> 
    <div class="game-options"> 
     More stuff here, yo! 
    </div> 
</div>

但這裏的問題是，對於每一個新的按鈕添加，我需要刪除所有其他類或風險的新背景沒有出現。我也失去了如何有一個背景重複，而另一個基於div的寬度動態調整大小。

我也不確定如何在保持js代碼最小的同時，徹底和最佳地改變點擊和懸停。

來源

2012-12-10 MCG

我會作出這樣的重複，但中心的大背景下類：

.game-bg{ 
    background: url("default-bg.jpg) repeat center; 
}

，只是改變了背景屬性：

$("#select_item1").click(function(e) { 
    $("#selected-game").css('background-image', 'url("myimage.jpg")'); 
});

只要確保您使用的圖像足夠大，可以在大屏幕上很好地顯示。由於背景圖片居中，因此它會在左側和右側展開並收割。

另一種方法去將是看背景-size屬性（但這不是在所有的瀏覽器都支持）：

http://www.css3.info/preview/background-size/

Specificly 汽車或蓋。

後續問題：

如果你使用jQuery再次刪除CSS應該轉換回默認。遊戲-BG階級背景：

$("#selected-game").css('background-image', ''); //leave the background empty

然而，如果您即點擊的一個項目....然後將鼠標懸停在其他項目上。它將恢復到默認背景，而不是「活動」項目。如果你還想讓它變得更復雜一點。然後，您應該將活動的類添加到活動的項目中。在mouseout上查找具有活動類的項目，查找ID並根據ID應用正確的背景。我希望這是有道理的:-)

來源

2012-12-10 02:23:03 DivZero

謝謝！我現在正在玩弄背景大小的屬性。任何想法，我怎麼能做到這一點mouseover和鼠標以及？我正在嘗試添加和刪除類，但是隨後會出現問題，如果我在當前選定的背景上使用鼠標和鼠標移動，它會重置爲默認背景。 $（「＃select_minecraft」）鼠標懸停（函數（e）中{ \t \t \t $（「＃選擇遊戲」）addClass（ 'game_bg_minecraft'）; \t \t}）。 \t \t $（「＃select_minecraft」）鼠標移開（函數（e）中{ \t \t \t $（「＃選擇遊戲」）removeClass（ 'game_bg_minecraft'）; \t \t}）。 – MCG

您的代碼很難閱讀。但是，如果我理解正確，你想嘗試使用我的一個類的方法，結合後臺大小的屬性，但不是點擊，但鼠標懸停。在幾分鐘內看到我的編輯 – DivZero

糟糕的代碼非常抱歉。我已經把它放到jsfiddle中：http://jsfiddle.net/k2wft/我想知道的是，如果有人將鼠標懸停在按鈕上，也可以讓背景變化。我在這個時候遇到的問題是，mouseover/mouseout會清除選擇哪個按鈕，以便在沒有按鈕按下的情況下進行鼠標移動，如果有意義的話，背景會回到默認設置。 //編輯：只讀你的編輯，並意識到你通過活躍的類來回答這個問題。我會試着玩。感謝您指點我正確的方向。非常感激。 – MCG

嘗試使用background-size:100%這是一個CSS3屬性，將基於它的容器

瞭解更多信息結帳W3Schools的調整背景圖像here

來源

2012-12-10 02:14:18 Darwayne

感謝您的提示！ – MCG

@MCG看起來像Darwayne打敗了我;-)我也發佈了這個屬性作爲潛在的解決方案。不過，就像我之前提到的那樣，瀏覽器支持很好，因爲它只有IE9以上版本。祝你好運！ – DivZero

在翻轉時替換響應div背景並單擊

回答

相關問題