[英]Remove default ui hyperlink behaviour
I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches.我制作了一个搜索框,它使用 jQuery UI 自动完成功能来显示潜在的搜索匹配项。 I have noticed that the a
s in the drop down list move and shrink the UI menu by several pixels when hovered.我注意到下拉列表中的a
s 在悬停时移动和缩小 UI 菜单几个像素。 Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:有没有办法防止这种情况出现在菜单链接上的唯一样式是我通过以下方式添加的颜色更改:
.ui-menu .ui-menu-item a:hover{
background:none;
color:#FF0000;
font-size:10px;
}
Here is a fiddle of my progress so far https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/这是迄今为止我的进步https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/
So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus
class on your element which has these css properties:因此,当您将鼠标悬停在下拉列表中的项目上时,jQuery ui 会在您的元素上添加一个ui-state-focus
类,该类具有以下 css 属性:
.ui-state-focus {
font-weight: normal;
margin: -1px;
}
The reason you're seeing the characters jump is because of the margin: -1px;
你看到字符跳跃的原因是因为margin: -1px;
. . If you override that css class with something else you can eliminate the jumping text.如果您用其他东西覆盖该 css 类,则可以消除跳跃文本。
So in order to fix you could do this:所以为了修复你可以这样做:
.ui-menu .ui-menu-item a.ui-state-focus {
margin: 0px;
}
Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles.注意我添加了其他 CSS 选择器,以便获得一定程度的特异性来覆盖 jQuery UI 的样式。 Here's an updated jsFiddle: https://jsfiddle.net/zcvxy2z6/16/这是更新的 jsFiddle: https ://jsfiddle.net/zcvxy2z6/16/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.