Question

如果您将鼠标悬停在某个项目上，则会显示一些文字，但如果您将鼠标悬停在该文本上，则会终止该悬停样式，因为这不会触发悬停。

p.description {
    position:absolute;
    top:50%;
    left:50%;
    margin: 40px 0 0 -125px; /*offset 50px from center*/
    transform: translateY(-50%); /*vertically centered*/
    width:250px;
    height:80px;
    z-index:1000;
    color: #ffffff;
    opacity: 0;
}
.holder:hover p.description {
    margin-top: 0; /*makes me slide up*/
    opacity:1;
    visibility:visible;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
p.description span {
    font-family: 'aileronbold';
    font-size: 110%;
}

这是我试图完成此任务的css。我不确定如何重新定位以实现这一目标。当你将鼠标移到文本上时，一切都按照我的要求减去。

您可以在以下位置查看：http://darrenbachan.com/

Answer 1

这是z-index问题：

z-index: 9999; /* Or anything more than 1000 */

将上述z-index提交给.grow：

.grow {
    z-index: 9999;
}

只是因为你正在使用transition，这个混蛋才会发生。猜猜没有办法。

Answer 2

更改

.holder:hover p.description

到

.holder:hover p.description, p.description:hover

一点点黑客，但它会起作用。

P.S。喜欢这个网站！很漂亮。

Answer 3

将选择器从.holder a:hover更改为.holder:hover a。您看到了这个闪烁问题，因为当您将鼠标悬停在将要转换的p描述元素上时，转换将结束。通过将:hover伪类移动到父元素，转换将保持不变，即使你没有悬停在a元素上：

.holder:hover a {
    opacity: 0;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

为了使锚元素位于p描述元素之上，您绝对可以将 relative 定位到.holder（因为它位于相对位置）。

.holder a {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

然后从z-index: 1000删除p.description。

Answer 4

更改

.holder a:hover {
   opacity:0;
}

要

.holder:hover a {
   opacity:0;
}

关键是将所有悬停样式的选择器加上.holder:hover前缀。

：悬停目标不能完全按我想要的方式工作

4 个答案: