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

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;
}

text 一直隐藏，直到您将鼠标悬停在 ID 为 pie 的 div 上。> 表示如果它是 pie 的子元素，它将影响它之后的元素。当您将鼠标悬停在图像上时，它会将段落中的 display:none 更改为 display:block。 #pText:hover 表示当您将鼠标悬停在段落上时，text-decoration:underline 会在您将鼠标悬停在 下划线 文本时 < strong>段落。