Javascript 设置jQuery自动完成的样式

我正在使用jQuery的web提供的jQuery UI自动完成功能，并且我正在尝试自己使用css样式

当鼠标悬停在“自动完成”的选项上时，我希望背景发生变化，但不会全部改变。你会注意到顶部、左侧、底部和右侧的小边框（我猜它们是边距）。我知道我的指定只是为了更改

.ui菜单.ui菜单项

，而这些小边框不是它的一部分（我的意思是，我猜），所以我想知道如何更改css样式，以便在悬停效果中包含所有内容

包含完整代码的代码段：

var searcher=document.getElementById（'buscador'）；
searcher.onclick=magiaNegra；
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
函数magiaNegra（）
{
var master=searcher.parentNode；
searcher.style.animationName=“expandismo”；
searcher.style.animationDuration=“0.5s”；
setTimeout（函数（）{
移动儿童大师（搜索者）；
var barraSearch=document.createElement（'input'）；
setAttribute（'type'，'text'）；
setAttribute（'id'，'barraSearch'）；
setAttribute（'class'，'form control'）；
setAttribute（'placeholder'，'Buscar…'）；
var botonCheto=document.createElement（'button'）；
var secondSpan=document.createElement（'span'）；
setAttribute（'type'，'button'）；
setAttribute（'id'，'searchBox'）；
setAttribute（'class'，'glyphicon-glyphicon-search'）；
setAttribute（'aria-hidden'，'true'）；
二次跨度；
主治儿童（barraSearch）；
主儿（波顿切托）；
barraSearch.focus（）；
$（“#搜索”）.autocomplete({
来源：功能（请求、响应）{
var results=$.ui.autocomplete.filter（availableTags、request.term）；
反应（结果切片（0,3））；
}
});
}, 500);
}

。容器流体
{
文本对齐：居中；
}
#托普兰
{
颜色：白色；
背景图片：url（citybackground.jpg）；
背景大小：100%100%；
最小高度：400px；
}
#帕塔
{
背景色：#1A1A；
字体系列：Helvetica窄字体、无衬线字体、单空格字体；
颜色：白色；
}
#博特兰
{
背景色：#1A1A；
身高：100%；
}
#头骨
{
边缘顶部：60像素；
颜色：白色；
文本阴影：0px 0px 12px白色，0px 0px 8px白色；
字体系列：Helvetica窄字体、无衬线字体、单空格字体；
字体大小：120px；
字体大小：60px；
}
#布斯卡多
{
边缘顶部：50px；
文本对齐：右对齐；
右侧填充：12px；
左缘：48%；
边界：无；
颜色：#5959；
宽度：40px；
高度：40px；
边界半径：20px；
背景颜色：浅灰色；
光标：文本；
}
#布斯卡多：悬停
{
背景颜色：浅灰色；
不透明度：1；
}
#巴士司机：主动
{
背景色：白色；
}
.容器流体.输入组
{
宽度：100%；
显示：内联flex；
文本对齐：居中；
}
.容器流体.输入组.窗体控件
{
边缘顶部：50px；
显示：内联块；
左边距：15%；
宽度：70%；
边框左上半径：18px；
边框左下半径：18px；
背景颜色：浅灰色；
高度：40px；
左侧填充：10px；
字体大小：20px；
颜色：黑色；
字母间距：2px；
} 
.容器流体.输入组.窗体控件：焦点
{
边框颜色：浅灰色；
盒影：-5px 0px 5px#e6ffff；
盒影：-5px0px 10px#e6ffff；
盒影：-5px0px 8px#e6ffff；
盒影：-5px0px 12px#e6ffff；
}
#搜索框
{
边缘顶部：50px；
显示：内联块；
背景颜色：浅灰色；
边界：无；
左边框：实心1px灰色；
颜色：#5959；
高度：40px；
边框右上角半径：18px；
边框右下半径：18px；
宽度：35px；
}
.容器流体.输入组.表单控件：焦点+#搜索框
{
盒影：5px 0px 5px#e6ffff；
盒影：5px0px 10px#e6ffff；
盒影：5px0px 8px#e6ffff；
盒影：5px0px 12px#e6ffff；
}
#盒子
{
利润率：15px 0px 40px 0px；
最大宽度：350px；
宽度：90%；
高度：300px；
背景色：白色；
边框：实心2px#b3e6ff；
边界半径：6px；
填充顶部：25px；
字体系列：Helvetica窄，无衬线；
}
.ui菜单
{
位置：相对位置；
列表样式：无；
背景色：白色；
边界半径：18px；
z指数：10；
盒影：5px0px 8px白色；
宽度：214px；
线高：200%；
字号：18px；
填充：10px；
边框：实心1px灰色；
}
.ui菜单.ui菜单项
{
保证金：无；
左侧填充：5px；
}
.ui菜单.ui菜单项：悬停
{
背景色：暗灰色；
}
@关键帧展开
{
从{宽度：40px；左边距：49%；}
到{宽度：73%；左边距：15%；}
}

价格浏览常见问题
价格浏览常见问题
布斯奎达酒店
O纳韦格先生：
价格冲浪门户网站上的新用户信息





价格冲浪者-尼莫GROUPejemplo@ejemplo.ej

您可以使用类

.ui state focus

，因为悬停状态会自动添加到

li

上

.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus { background-color: rgba(0,0,0,0.4); }

---

您可以尝试将左右填充从ui菜单移动到ui菜单项类。像这样：

.ui-menu
{
    position: relative;
    list-style: none;
    background-color: white;
    border-radius: 18px;
    z-index:10;
    box-shadow: 5px 0px 8px white;
    width: 214px;
    line-height: 200%;
    font-size: 18px;
    padding: 15px 0;
    border: solid 1px grey;

}
.ui-menu .ui-menu-item
{
    margin: none;
    padding-left: 15px;
    padding-right:10px;
}