jquery - 在鼠标悬停时替换响应式 div 背景并单击

Question

我无法理解如何编写需要动态背景的 div 背景。 div 具有特定的高度，但宽度是浏览器的大小。

我有一个 div，它有一个默认的重复所有背景图案，但如果将鼠标悬停在按钮上或单击它会发生变化。背景不重复，所以我试图找出如何根据浏览器大小(即 div 大小)扩展/调整它们的大小。

它应该是这样的……默认值:http://i.imgur.com/yMZEZ.png类别 1(悬停/按下):http://i.imgur.com/OMhjT.png

注意默认是重复模式，而另一个是完整背景。

我的代码目前是:

$("#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 代码保持在最低限度的同时针对点击和悬停进行干净和最佳的更改。

Answer 1

我会制作重复但居中的一般背景类:

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

只需更改背景属性:

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

只要确保您使用的图像足够大，可以在大显示器上很好地显示。因为背景图像居中，所以它会在左侧和右侧进行扩展和裁剪。

另一种方法是查看 background-size 属性(但并非所有浏览器都支持):

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

特别是自动或覆盖。

跟进问题:

如果您再次使用 jQuery 删除 CSS，它应该转换回默认的 .game-bg 类背景:

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

但是，如果您即点击其中一项……然后将鼠标悬停在其他元素上。它将恢复为默认背景，而不是“事件”元素的背景。如果你也想要它变得有点复杂。然后，您应该向事件的元素添加一个事件类。在 mouseout 上查找具有事件类的元素，查找 ID 并根据 ID 应用正确的背景。我希望这有意义:-)