Question

我正在忙于“一周的最佳”-box，它显示在某些主页上。不久之前发生了一个令人烦恼的小问题，但我希望它会消失，有时会发生，它会陷入低水平。

查看实时示例HERE。

左侧显示三个子项目，并且每隔几秒钟页面加载后它将进入序列中的下一个（1-> 2,2-> 3,3-> 1）。最初显示项目＃1并且项目＃2 +＃3被隐藏，并且在点击拇指＃2之后 - 或者 - 在几秒钟后自动，项目＃1将消失并且项目＃2将出现/ slideIn / fadeIn /等等。

在主要项目＃1，＃2和＃3中，有一个 DIV1 ，文字内容显示有关该项目的信息。

样式设置为50透明度。由于透明度设置为低于100的值，因此有时难以阅读文本。要解决这个问题......当用户点击 DIV1 时，会显示另一个带有白色背景的 DIV2 - 后面 - DIV1 ！

现在文本将更容易阅读，因为（组合）背景透明度较低。

在页面加载后直接

正常工作（nav_to_slide2 / 3（）未执行）：点击 DIV1 将显示 DIV2 。
当执行nav_to_slide1 / 2/3（）时工作NOK ：点击 DIV1 将 - 不显示 DIV2 。

我想这与z-index的东西有关，因为这个（或 some.parent ）因滑动/淡入淡出效果需要改变？< / p>

我尝试过调试，但找不到修复方法。请注意，即使使用NOK-case，alert = A =，= B =和= C =也会发生...

Source JQUERY code

Answer 1

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）将position:relative添加到使用z-index的div。

Answer 2

“保持简单愚蠢”在这里非常到位......
使用css找到解决方案（在stackoverflow上）：

div.box_slide_over_text, div.box_slide_over_text:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

div.box_slide_over_text { opacity:0.45; filter:alpha(opacity=45); }
div.box_slide_over_text:hover { opacity:0.80; filter:alpha(opacity=80); }

完全删除了带有相应z-index的 DIV2 检查live version是否有固定版本代码。

更改z-index后DIV不显示

2 个答案: