javascript - 套索可选禁用 CSS :hover state

标签 javascript jquery jquery-ui css

我在一个 div 中有一组 jquery ui 可选择的东西,它在悬停事件时扩展到全尺寸。期望的效果是人们可以选择/多选/套索尽可能多的可选对象。当他们完成选择并且鼠标转到页面的另一部分时,div 将返回到其最小尺寸。

基本上我可以正常工作,但是当我套索选择多个对象时,:hover 状态似乎被取消或禁用。这会导致 div 过早地恢复到其原始大小,从而破坏用户体验。

jsfiddle 在这里:http://jsfiddle.net/Ty6RX/2/

有问题的 div 包含蓝色的“All Customers”。如果您尝试套索选择多个对象,您应该会看到问题。非常感谢任何帮助!

最佳答案

当鼠标被按住时,元素离开 :hover 并进入 :active 状态 w3schools reference .幸运的是,您可以在不打扰用户的情况下将 CSS 类应用于这两种状态

试试这个 http://jsfiddle.net/Ty6RX/3/

 #customer_picker:hover, #customer_picker:active {

    ...

    height: 300px;
 }

关于javascript - 套索可选禁用 CSS :hover state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20422936/

相关文章:

jQueryUI 自动完成 - 将搜索结果与 DOM 中的输入相邻放置

jquery-ui - jquery sortable inside angular指令错过了第一次点击

javascript - Chrome 的加载指示器在 XMLHttpRequest 期间不断旋转

javascript - 以编程方式调整 Div 的大小

javascript - Backbone - 所选元素未触发的事件已更改

javascript - 单击动态创建的按钮和 AJAX 调用替换内容

javascript - 滚动浏览 jquery ui 自动完成返回时如何隐藏值

javascript - 使用正则表达式从 jQuery 序列化结果中删除默认值

Javascript - 缺少输入的文本区域上的红色轮廓

javascript - 使用 document.getElementById 设置输入值不是真正设置值