Question

我试图在我的照片库中为每张图片添加两个悬停动画。基本上，当您将鼠标悬停在图像上时，我希望有一个显示在黑色叠加层中的文本，当您将鼠标悬停在该文本上时，它会变为下划线。从本质上讲，我希望它看起来像这样：http://i.stack.imgur.com/vAWpd.jpg 我知道我必须创建一个悬停元素但事实上我有两个在彼此之间创建两个动画真的让我很困惑。有人能给我一些指导吗？谢谢！罗文</ P>

Answer 1

你的意思是this?

HTML：

<div id = 'pie' src = 'http://www.pieisgood.org/images/slice.jpg'><p id="pText" style='left:50px; top:50px; position:absolute;'>Text</p></div>

CSS：

#pie
{
    width:500px;
    height:265px;
    background-image:url('http://www.pieisgood.org/images/slice.jpg');
}

#pText
{
    display:none;
    transform:rotate(60deg);
    border:1px solid;
}

#pText:hover
{
    text-decoration:underline;
}

#pie:hover > #pText
{
    display:block;
}

隐藏文字，直到您将鼠标悬停在ID 派的 div 上。 >表示它会生效如果它是pie的孩子，则在它之后的元素。当您将鼠标悬停在图像上时，它会将段落上的display:none更改为display:block。 #pText:hover表示当您将鼠标悬停在段落上时，当您将鼠标悬停在段落上时，text-decoration:underline会强调文字。

如何在wordpress中的另一个悬停动画期间创建悬停动画？

1 个答案: