Html 将特定属性传递给选定的子级

我目前正在开发我的第一个站点，在尝试创建两个动画时遇到了一个问题。元素悬停时，将文本移动到图像上方（在本例中为“Krow徽标”），缩放图像，并更改其不透明度。到目前为止很好

问题是，我想要一个小文本在这个动画中过渡，以及元素h3。这并不是我尝试过的所有方法都有效。我想象这是继承的问题，所以我尝试将父对象的属性专门更改为它的第二个子对象。不走运

我想保留溢出：隐藏在h2（Krow徽标）上，但不在h3上，因为我希望h3移动到父框之外

任何提示都将不胜感激

我已经摆弄了：n个孩子试图改变属性溢出：隐藏到可见

我尝试创建一个位置设置为相对的祖父母元素

我尝试了+~>组合符的组合

它们都不起作用

CSS

@导入url(https://fonts.googleapis.com/css?family=Raleway:400,800);
图snip1104：第一个孩子{
字体系列：“Raleway”，Arial，无衬线；
位置：绝对位置；
左：20%；
溢出：隐藏；
利润率：10px；
最小宽度：220px；
最大宽度：310px；
最大高度：220px；
宽度：100%；
背景：#000000；
颜色：#ffffff；
文本对齐：居中；
长方体阴影：0.5pxRGBA（0,0,0,0.15）；
}
图1.snip1104 h2{
位置：绝对位置；
左：40px；
右：40px；
显示：内联块；
背景：#000000；
-webkit变换：倾斜（-10度）旋转（-10度）平移（0，-50%）；
变换：倾斜（-10度）旋转（-10度）平移（0，-50%）；
填充：12px 5px；
保证金：0；
最高：50%；
文本转换：大写；
字体大小：400；
}
图snip1104：悬停h2，
图2.snip1104.hover h2{
-webkit变换：倾斜（-10度）旋转（-10度）平移（-150%，-50%）；
变换：倾斜（-10度）旋转（-10度）平移（-150%，-50%）；
}
图3.snip1104 h3{
不透明度：0；
z指数：5；
位置：绝对位置；
左：40px；
右：40px；
显示：内联块；
填充：12px 5px；
保证金：0；
顶部：110px；
溢出：可见；
}
图snip1104：悬停h3，
图1.snip1104.hover h3{
不透明度：1；
背景颜色：绿色；
转化：translateY（200%）；
}

HTML

克罗标志
特塞斯特

---

我希望产生的效果是使Tesst溢出父剪报并保持可见，尽管它已移出其边界。相反，h3消失（移动到位置，但被隐藏）

不确定我是否得到了您想要实现的目标，但是如果父框中隐藏了溢出，那么您想要溢出的任何内容都将被隐藏，因为这就是溢出的含义：隐藏

如果我可以问的话，你想以此为目标做什么

figure.snip1104:hover h2,
figure.snip1104.hover h2

---

我不确定我是否得到了您想要实现的目标，但是如果父框中隐藏了溢出，那么您想要溢出到父框之外的任何内容都将被隐藏，因为这就是溢出的含义：隐藏

如果我可以问的话，你想以此为目标做什么

figure.snip1104:hover h2,
figure.snip1104.hover h2

---

好的，我创建了一个例子来说明如何解决你所遇到的问题（根据我对你问题的理解）。基本上，您为标题和图像创建一个容器，并根据容器的悬停状态控制标题/图像

我已经放弃了解决移动元素问题所不需要的一切，因此您必须以合理的方式将其应用到您自己的解决方案中（例如，调整大小，

display:none

，无论您想要什么）

还有一些方法可以通过JavaScript触发，但我想展示一个只使用CSS的解决方案

如果您运行代码段，您应该全屏查看它，否则它看起来很糟糕，因为我使用的是查看端口单位作为页面高度。或者签出代码笔并将编辑器放在左侧或右侧，以获得更高的显示高度

@导入url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Raleway”，Arial，无衬线；
}
.第页{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景：灰色；
}
.主标题，
.小标题{
填充：2rem；
颜色：白色；
背景：rgba（0,0,0,6）；
过渡：所有300毫秒；
文本对齐：居中；
}
.主标题{
转化：translateY（200%）；
}
.小标题{
不透明度：0；
}
.容器：悬停。主标题{
变换：translateY（0px）；
}
.容器：悬停.子标题{
不透明度：1；
转化：translateY（-200%）；
}

标志
其他一些文本

好的，我创建了一个示例来说明如何解决您遇到的问题（根据我对您问题的理解）。基本上，您为标题和图像创建一个容器，并根据容器的悬停状态控制标题/图像

我已经放弃了解决移动元素问题所不需要的一切，因此您必须以合理的方式将其应用到您自己的解决方案中（例如，调整大小，

display:none

，无论您想要什么）

还有一些方法可以通过JavaScript触发，但我想展示一个只使用CSS的解决方案

如果您运行代码段，您应该全屏查看它，否则它看起来很糟糕，因为我使用的是查看端口单位作为页面高度。或者签出代码笔并将编辑器放在左侧或右侧，以获得更高的显示高度

@导入url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Raleway”，Arial，无衬线；
}
.第页{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景：slategr