gpt4 book ai didi

html - 将特定属性传递给选定的子项

转载 作者:太空宇宙 更新时间:2023-11-04 00:49:30 25 4
gpt4 key购买 nike

我目前正在我的第一个站点上工作,在尝试创建两个动画时遇到了问题。元素悬停时,将文本移动到图像上方(在本例中为“Krow Logo”),放大图像并更改其不透明度。到目前为止很棒。

问题是,我希望在此动画期间也有一个小文本过渡,即元素 h3。这在我尝试过的所有方式中都不起作用。我想象这是一个继承问题,所以我试图将 parent 的属性专门更改为它的第二个 child 。运气不好。

我想保留 overflow:hidden 在 h2(Krow Logo )上但不在 h3 上,因为我希望 h3 移到父框之外。

非常感谢任何提示!

我一直在摆弄 :nth-child 来尝试将属性 overflow:hidden 更改为可见

我已经尝试创建一个位置设置为相对的祖 parent 元素。

我试过 + ~ > 组合子的组合

它们都不起作用。

CSS


@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104:first-child {
font-family: 'Raleway', Arial, sans-serif;
position: absolute;
left:20%;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1104 h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}

figure.snip1104:hover h2,
figure.snip1104.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.snip1104 h3 {
opacity:0;
z-index: 5;
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
padding: 12px 5px;
margin: 0;
top: 110px;
overflow: visible;


}

figure.snip1104:hover h3,
figure.snip1104.hover h3{
opacity:1;
background-color:green;
transform: translateY(200%);
}

HTML


<figure class="snip1104 blue">
<img class="temp" src="/home/it21366/Desktop/liberty/tshirtblue.jpg" alt="sample33"/>
<figcaption>
<h2>Krow <span> Logo</span></h2>
<h3>tesssst</h3>
</figcaption>

<a href="#"></a>
</figure>

我希望产生的效果是让

tessst

溢出父片段并保持可见,尽管移出其边界。相反,h3 消失了(移动到位置,但隐藏了)

最佳答案

好的,我创建了一个示例来展示您可以如何解决您遇到的问题(根据我对您问题的理解)。基本上,您为标题和图像创建一个容器,并根据容器的悬停状态控制标题/图像。

我已经取消了解决移动元素问题所不需要的一切,所以你必须以一种有意义的方式将它应用到你自己的解决方案中(例如,调整大小,display: none ,随便你。

还有一些方法可以使用 JavaScript 触发此操作,但我想展示一个纯 CSS 解决方案。

如果您运行代码片段,您应该全屏查看它,否则它看起来很糟糕,因为我使用视口(viewport)单位作为页面高度。或者检查 codepen 并将编辑器放在左侧或右侧以获得更高的显示高度。

https://codepen.io/zenRyoku/pen/oRdYzB?editors=1100

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway', Arial, sans-serif;
}

.page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: slategray;
}

.main-heading,
.sub-heading {
padding: 2rem;
color: white;
background: rgba(0,0,0,.6);
transition: all 300ms;
text-align: center;
}

.main-heading {
transform: translateY(200%);
}

.sub-heading {
opacity: 0;
}

.container:hover .main-heading {
transform: translateY(0px);
}

.container:hover .sub-heading {
opacity: 1;
transform: translateY(-200%);
}
<div class="page">
<div class="container">
<h2 class="main-heading">Logo</h2>
<img src="https://source.unsplash.com/400x300/?japan,sign"/>
<h3 class="sub-heading">some other text</h3>
</div>
</div>

关于html - 将特定属性传递给选定的子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56305280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com