如何防止附加到可选择项的 jQuery 小部件在鼠标悬停时变大？

Question

TLDR 更新： 这里 JSFiddle 展示了我的问题。

在一个 HTML 游戏中，我创建了一个名为 a custom jQuery widget 的游戏 table，代表一个绿色矩形 table，最多可容纳 4 名玩家：

在上面的屏幕截图 4 中，这样的 tables 通过以下代码附加到 #tablesList 选择 table：

var tablesList = $('#selectable').selectable();

var table1 = $('<li/>').appendTo(tablesList).table({ gid: 3 });
var table2 = $('<li/>').appendTo(tablesList).table({
    gid: 104,
    player0: {
        rep: Math.random(),
        photo: 'http://afarber.de/images/farber.jpg'
    }
});
var table3 = $('<li/>').appendTo(tablesList).table({
    gid: 115,
    player0: {
        rep: Math.random()
    },
    player1: {
    },
    player2: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/male_sad.png'
    },
    player3: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    }
});
var table4 = $('<li/>').appendTo(tablesList).table({
    gid: 115,
    player0: {
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    },
    player1: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_sad.png'
    },
    player2: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/male_sad.png'
    },
    player3: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    }
});

#tablesList 已将 CSS 属性 overflow-y: 设置为 scroll:

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected  { background: #F39814; color: white; }
#selectable { 
    list-style-type:    none; 
    margin:             0;
    padding:            0;
    height:             500px;
    overflow-y:         scroll;
}

我的问题是：当我将鼠标指针悬停在 table 小部件之一上时，它似乎变成了尺寸稍大的 CSS 状态，从而推动了右侧 tables 到 #tablesList 中的下一行：

截图一（鼠标悬停在第二个table）：

截图2（鼠标在第三个上面table）：

如您所见，第四个 table 总是被向下推。如果我将鼠标指针移开，则会产生令人讨厌的闪烁效果，其中第 4 table 在第 1 行和第 2 行之间变化。

我的问题是如何防止这种情况发生？我试过在浏览器开发中检查 CSS。工具，但未能发现任何相关 CSS 属性.

我的 CSS 文件 style.css is listed below and you can see the effect by visiting the game web page（虽然在 Google OAuth 之后，对此感到抱歉）：

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected  { background: #F39814; color: white; }
#selectable { 
    list-style-type:    none; 
    margin:             0;
    padding:            0;
    height:             500px;
    overflow-y:         scroll;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

fieldset {
    border: 0px;
}

.ui-draggable, 
.ui-droppable {
    background-position: top;
}

#gameDiv {
    position: relative;
}

#gameCanvas {
    background: radial-gradient(#FFFFFF, #99CC99);
}

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:fullscreen {
    background: #FFF;
}

#lobbyTable {
    background: #FFF;
}

#kukuSlider {
    width:          300px;
    margin:         15px;
}

#red, #green, #blue {
    width:          300px;
    margin:         15px;
}

#swatch {
    padding:        10px;
    margin:         5px;
    color:          #FFF;
}

#red   .ui-slider-range  { background:   #ef2929; }
#red   .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range  { background:   #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue  .ui-slider-range  { background:   #729fcf; }
#blue  .ui-slider-handle { border-color: #729fcf; }

.raspasy-player {
    position:           relative;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    width:              160px;
    height:             120px;
}

.raspasy-player-name {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         left;
    left:               0;
    bottom:             0;
    padding:            2px;
    width:              156px;
    height:             20px;
}

.raspasy-player-bid {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         right;
    right:              0;
    top:                0;
    padding:            2px;
    width:              36px;
    height:             20px;
}

.raspasy-player-trix {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         right;
    right:              0;
    bottom:             0;
    padding:            2px;
    width:              36px;
    height:             20px;
}

.raspasy-player-rep {
    position:           absolute;
    right:              0;
    bottom:             0;
}

.raspasy-player-bad-big {
    position:           relative;
    background:         #C00;
    width:              50px;
    height:             1px;
    display:            none;
}

.raspasy-player-bad-small {
    position:           relative;
    background:         #C00;
    width:              25px;
    height:             1px;
    display:            none;
}

.raspasy-player-good-big {
    position:           relative;
    background:         #6C6;
    width:              50px;
    height:             1px;
    display:            none;
}

.raspasy-player-good-small {
    position:           relative;
    background:         #6C6;
    width:              25px;
    height:             1px;
    display:            none;
}

.raspasy-table {
    position:           relative;
    background:         #A3DD8E;
    color:              white;
    margin:             50px; 
    float:              left; 
    border:             4px solid #91BCE5;
    border-radius:      16px;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    width:              160px; 
    height:             160px; 
}

.raspasy-table-gid {
    position:           absolute;
    font-size:          1.5em; 
    top:                65px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

.raspasy-table-player0 {
    position:           absolute;
    left:               -40px;
    top:                50px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player1 {
    position:           absolute;
    left:               40px;
    top:                -30px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player2 {
    position:           absolute;
    left:               120px;
    top:                50px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player3 {
    position:           absolute;
    left:               40px;
    top:                130px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

我也在 jQuery UI forum 上问过我的问题。

Answer 1

当你将鼠标悬停在第三个时，最后一个 table 会跳转，因为你给它 class ui-state-hover 将边框从 4px 更改为 1px，从而从 table 的 height 和 width 中减去。通过在 raspasy-table 元素中添加 box-sizing: border-box 可以轻松解决此问题。这样边框就会向内显示，而不是向外显示。

如何防止附加到可选择项的 jQuery 小部件在鼠标悬停时变大？

How to prevent a jQuery widget appended to a selectable from growing bigger onmouseover?

jquery

jquery-ui

onmouseover

mousehover

jquery-widgets