Question

当我悬停时，我试图在我的产品上显示标题。我设法得到它，但黑色不会显示黑色，就像我有一些白色背景在我的效果之上。你可以看到它there

这是我添加的CSS

.product：hover .reveal img { 不透明度：1; z-index：1; }

.reveal .hidden {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: -20px;
}

.reveal:hover .hidden {
    z-index: 1;
    opacity: 1;
}

.reveal .caption {
    position: absolute;
    top: 0;
    display: table;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1) !important;
    font: 12px/1.4em sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
}

.reveal .hidden .caption .centered {
    display: table-cell;
    vertical-align: middle;
}

您是否认为它与z-index问题一样基本，还是更像我构建它的方式？

Answer 1

这是因为@empimage对hover的动画有.image-wrapper效果。如果设置opacity:0.5（仅用于测试，您可以看到黑色是黑色。

那你能做什么？

对.product-grid .image-wrapper {opacity:1 !important)执行fadeOut效果。这样.reveal > img将保持.product-grid .image-wrapper。

Answer 2

试试这个

.reveal:hover .hidden { 
      z-index: 0;
      opacity: 0.8;    

    }

Answer 3

其中一个问题是.caption的大小与它所放置的图像大小相同，并且背景为1.0 alpha - 这意味着一旦z-index允许，标题框就会完全覆盖图像它在前面流行。

另一个问题是js / jQ在翻转时做动画。只需添加将悬停处理程序添加到其中的代码即可。如果您想要淡入/淡出，请将基座z-index放在标题上以使其自然位于前方，并在opacity上将其:hover设置为最高100％。这与将整个图块的不透明度从100％设置为50％以及切换堆叠顺序相反。

Answer 4

Input: path[] = "GLGLGLG"
Output: Given sequence of moves is circular 

Input: path[] = "GLLG"
Output: Given sequence of moves is circular

将解决它。当你将鼠标悬停在0.5时，这将停止它。

奇怪的悬停效果

4 个答案: