css - 在没有 jquery 的情况下悬停后保持 div 打开

标签 css

我实际上使用 css 函数 :hover 使我的 div 出现并且没有 jquery。问题是当光标离开 div 时 div 消失。 我也避免使用 display:block; 函数,因为我无法利用 css 的不透明过渡功能。我看到其他帖子使用所有内置的 jquery 代码解决了这个问题。我想知道是否可以在不重写 jquery 中的整个代码的情况下完成。

这是 fiddle http://jsfiddle.net/dandecasa/k22UG/1/

如您所见,将鼠标悬停在左侧的黑色 div 上时,#zobbigmenu div 会出现。是否可以让它在光标位于#zobbigmenu div 时可见?

谢谢你的帮助

最佳答案

Javascript/jQuery 不是必需的。

:hover#zobbigmenu 上也添加样式。

jsFiddle example

#zobmenu:hover ~ #zobbigmenu, #zobbigmenu:hover {
    margin-left: 20px;
    cursor:alias;
    opacity:0.8;
    margin-right: auto;
    z-index:10;
}

或者,我建议在 #zobmenu 中嵌套 #zobbigmenu

关于css - 在没有 jquery 的情况下悬停后保持 div 打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20777293/

相关文章:

html - Bootstrap 3,更改折叠的堆栈顺序

css - 仅使用样式化组件时如何影响外部 CSS 类

css - Bootstrap 4 卡片列有时在 Chrome 中显示的列与其他浏览器不同

jquery - 带标签的动态输入宽度

html - 我怎样才能使文本阻碍它的下划线 'block out' HTML/CSS 中带空格的下划线?

html - 如何根据我所在的 URL/网站和/或服务器自动选择要使用的 css?

javascript - 通过 JQuery 替换内容 css

jquery - 创建一个 JQuery 菜单弹出窗口

javascript - jquery添加的内联样式为空

html - 使用带有 jsf 重复标记的第 n 个子 css 选择器