介绍
构建my own personal site很有趣，因为我必须花时间花一些时间的细节和微妙的效果，以给它一些额外的东西 - 我知道当我在其他网站上看到它们时，我总是很感激。我想添加的一个细节是一个小箭头，当用户徘徊时，我的每个博客文章的“读取更多”链接旁边出现了。
看到旁边的这个小箭头阅读更多？只有当用户在卡上慕斯时才在那里。
乍一看，对于CSS koude0选择器来说，这听起来像是一个相对简单的事情，但是我实际上想发生的是当用户徘徊在我的卡的任何上的任何一部分时，箭头都会出现 - 不仅是卡的左下角的“读取更多”链接。我真正想要的是较大的parent容器触发a child element 中的CSS更改。事实证明，使这项工作更棘手。但是我坚持不懈，最后，有一个小箭头，这些箭头会根据用户的鼠标出现和消失。这是一个低调的补充，我喜欢 - 几乎就像复活节彩蛋。
本文将向您展示如何使用用户在DOM中使用父元素（如悬停在该元素上）的相互作用，以通过CSS进行儿童元素进行更改。（i可以看到很多这样的情况可能会很方便。）
下面是一个视频，显示卡片上的“读取更多”文本旁边的箭头如何出现，无论卡中的用户慕斯何处：标题，主体，标签 - 卡中的任何地方都会使箭头出现，而不仅仅是当用户在链接本身上慕斯时。
制作博客发布卡的HTML（或JSX）
在进入本文的CSS部分之前，我们首先需要设置博客发布卡的HTML的一般轮廓。
我的网站是使用Gatsby framework的React构建的。在我的代码示例中，您会看到一个反应和JSX而不是传统HTML的Smidge，但是CSS确实是我们对本文大多数的重点，因此不必太担心。
>注意：我已经省略了大多数特定于钩子，状态，功能等的反应特定代码，以更好地关注本文的范围，但是如果您想查看完整的代码，您可以单击任何代码示例的标题，以查看我在GitHub中的完整回购文件。
这是对LatestPosts组件的简化查看，该组件获取了我网站上可用的所有博客文章，并将最新的四个列出在卡片列表中显示。
// other imports for React, components, constants, etc.
import './LatestPosts.scss';
const LatestPosts = () => {
// state variables here
// logic to fetch all blog posts, take the most recent 4 posts and format the data to display
return (
<div className="latest-posts-wrapper">
{posts.length
? posts.map((post, index) => (
<div className="post" key={index}>
<Link
className="post-link"
to={`/blog${post.path}`}
key={post.title}
>
<p className="post-title">{post.title}</p>
<p className="post-sub-title">{post.subTitle}</p>
<PostTags tags={post.tags} />
<p className="read-more">
Read more <span className="arrow">></span>
</p>
</Link>
</div>
))
: null}
<h2>
<Link to="/blog">View all articles ></Link>
</h2>
</div>
)
};
export default LatestPosts;
在此组件代码中，有一个<div>（所有React组件的要求），其中包含此列表中显示的所有帖子：它是带有latest-posts-wrapper类的<div>。
然后，将posts的列表与.map()迭代，每个单独的帖子都被渲染为DOM中的元素，看起来像一张卡片。每张卡都有指向帖子，博客标题，字幕，标签和文本Read more的链接，鼓励用户点击。
请注意，<Link>元素包裹了大多数博客文章内容 - 这将很快就足够关键。
在最终的<p>标签内部带有read-more的类是<span>标签，它围绕>-这是我用作正确的箭头符号的HTML for the greater than sign (>)。
最后，组件底部还有另一个标题标签，<h2>，邀请用户使用all the blog posts进行网站页面。
好吧，既然HTML基础工作已奠定，让我们继续使用CSS，使这些箭头显现出现并根据需要消失。
将CSS添加到组件
现在，与<LatestPosts>组件相关的SCSS有更多的SCSS，但是为了清楚起见，我省略了与博客无关的位。如果您想查看代码的未删节版本，可以单击文件的名称并在GitHub中查看。
注意：下面的代码实际上是SCSS而不是纯CSS，因为我非常感谢它提供的其他功能，例如它提供的类嵌套，但是根据需要对其进行翻译非常简单。
好吧，这是CSS：现在让我们谈谈发生了什么。
.latest-posts-wrapper {
display: flex;
flex-direction: column;
.post {
margin: 10px 20px;
padding: 20px 30px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
border-radius: 5px;
.post-link {
// post-related css
.arrow {
opacity: 0;
}
}
.post-link:hover {
// more post-related css
.arrow {
opacity: 1;
}
}
}
}
当您查看此代码时，请特别说明.post-link和.arrow的类 - 它们是这里的钥匙。
.post-link是包围每张卡中所有内容的类。 arrow是与箭头大的类别。
为了使箭头隐藏在视图上，直到用户徘徊在卡上，我们将将arrow类设置为post-link类内部的opacity: 0;。即使它仍然存在于HTML中，它在屏幕上也不可见。
然后，当用户徘徊在卡上时，我们实际上在post-link类上调用CSS pseudo class :hover，然后切换arrow class'to opacity: 1;，这使箭头一旦鼠标进入任何位置卡。
，而不是将:hover添加到read-more类中，该类只能在用户通过“读取更多”链接的用户在卡中添加:hover，而是在卡片元素中添加:hover，从而使箭头几乎显示在任何地方用户的鼠标在卡上。瞧！
这就是全部：简单地将围绕子元素的:hover伪级移动在较大的父元件中可以实现。
再次，这是成品的外观：悬停在卡片上的任何地方，箭头出现，鼠标掉落，箭头再次消失。
结论
成为网络开发人员最酷的部分之一就是将事物带入网上，即使我不是设计师，在我建立自己的网站并添加各种各样的肌肉时，弯曲我的设计肌肉确实很有趣我喜欢的小触摸。
在这里和那里之类的渐变，微妙的动画等：没有什么太戏剧性的想法，但是当我在其他网站上看到它时，我总是欣赏的小东西。
不久前，我想添加的一种触摸是，当用户对我的一张博客卡进行鼠标，他们会在“阅读更多”提示弹出旁边看到一个小箭头。但是我希望箭头弹出鼠标可能会徘徊在卡上的任何地方 - 不仅是当他们在卡底部获得“更多”链接时。
通过在包裹所有卡的所有内容（而不仅仅是“读取更多”链接）上使用:hover伪级，我能够实现此效果努力。非常甜。
在几周内回来查看 - 我将写更多有关JavaScript，React，IoT或与Web开发有关的内容。
如果您想确保您永远不会错过我写的文章，请在此处注册我的时事通讯：https://paigeniedringhaus.substack.com
感谢您的阅读。我希望通过与父母或祖父母元素互动来影响子元素的CSS的技巧对您和我一样方便。