【问题标题】:Menu dropdown hover conflict with slider link below菜单下拉悬停与下面的滑块链接冲突
【发布时间】:2014-12-26 09:28:39
【问题描述】:

我们的网站主页似乎存在冲突,如果光标进入链接所在的区域,位于下拉菜单下方的链接会导致它过早关闭菜单。

有什么可能导致这种情况的想法吗?

主页是http://www.weddingideasmag.com,我正在尝试测试的链接名为“2014 Awards”,位于“主要奖项”选项卡下。

这绝对是滑块链接问题,因为该问题仅发生在滑块链接所在的主页上。我附上了下面问题区域的屏幕截图。

这是 Chrome 开发者工具中突出显示的同一区域。我认为这可能是 z-index 问题,但即使我将下拉 ul z-index 更改为大于链接区域,问题仍然存在。

下拉菜单的css是……

position: absolute;
top: auto;
display: none;
float: left;
zoom: 1;
z-index: 10;
margin: 0 0 40px -1px;
padding: 20px 0 6px;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #fafafa;
color: #676767;

滑块 li 元素的 css 是……

position: absolute;
top: 0;
right: 0;
height: 100%;
width: 5%;

【问题讨论】:

  • 请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则,一旦问题得到解决,这个问题将对未来的访问者失去任何价值。发布证明您的问题的Short, Self Contained, Correct Example (SSCCE) 将帮助您获得更好的答案。有关详细信息,请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢!
  • 我不确定要添加什么有意义的代码,因为我不确定问题是什么 - 如果我确实有线索,我会包括一些。至于问题描述,我的帖子里怎么没写?

标签: jquery html css conflict


【解决方案1】:

a.flex-nextz-index 设置为9,而不是随机数99,它大于下拉列表的z-index (z-index: 10)。似乎可行,但您的样式通常很混乱。

【讨论】:

  • 谢谢@fzzle 非常感谢。他们在什么方面乱七八糟?其中大部分是默认的 Woothemes 样式表 :-(
  • 不客气。样式表在 DevTools 中总是显得凌乱。您应该从一开始就发布相关样式。可能也是你有这么多反对票的原因。
【解决方案2】:

尝试指针事件:在您的菜单链接上没有打开

【讨论】:

  • 这将是一个 hacky 修复。他的问题是a.flex-next 元素在下拉列表的前面。
  • 嗨@Jeff - 谢谢你的建议。我试过了,它使下拉框在鼠标悬停时消失 - 不是预期的效果;-)
  • 这可以做到......用一点 js,当你的下拉菜单可见时,在你的 flex-next 链接上切换一个类
  • 用一个 js 打赌——当下拉菜单可见时,你当然可以在你的 flex-next 上切换一个类。
猜你喜欢
  • 2012-07-31
  • 1970-01-01
  • 2019-03-29
  • 2012-09-09
  • 2021-09-08
  • 1970-01-01
  • 1970-01-01
  • 2020-03-07
  • 1970-01-01
相关资源
最近更新 更多