Question

我有一个基本的3 x 3 CSS网格布局，将鼠标悬停在动画图标上时，我无法使某些文本出现。这是一个投资组合主页，屏幕的每一面都指向该站点的不同部分。为避免布局混乱，我希望隐藏该部分的名称，直到用户通过悬停显示对该部分的兴趣为止。

将鼠标悬停在另一个网格区域上时，我需要一些帮助来正确定位某个网格区域项目。

我已经尝试过将鼠标悬停在图标上来尝试定位h2文本的所有方法，但我发现唯一可行的解决方案是针对整个网格容器。除此之外，h2文字都不会显示。

我想我可以通过扩大网格并将h2元素和超棒字体图标放置在自己的区域中来实现此目的。我希望尽可能缩小网格。

<body
  <div class="grid-container">
    <div class="main">
      <img src="https://i.imgur.com/va67zMv.jpg"/>
      <h1>Hello! My name is Tyler Sunderland and I'm a <span id="rotate">this</span>!<h1/>
    </div>
    <div class="top">
      <h2>About Me</h2>
      <i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-90"></i>
    </div>
    <div class="right">
      <i class="fal fa-chevron-right fa-3x faa-passing animated" data-fa-transform="rotate-180"></i>
      <h2>Projects</h2>
    </div>
    <div class="left">
      <h2>Blog</h2>
    <i class="fal fa-chevron-right fa-3x"></i>
    </div>
    <div class="down">
    <i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-270"></i>
      <h2>Contact Me</h2>
    </div>
  </div>
</body>

body {
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 1em;
}

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: ". top ." "left main right" ". down .";
  grid-gap: 5px;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;

}

.grid-container > div > h1, h2, p {
  font-family: 'Roboto', sans-serif;
}

.grid-container > div > h2 {
  padding: 0px;
  margin: 0px;
  font-size: 1.5em;
}

.main { 
  display: grid;
  grid-area: main;
  align-items: center;
  justify-items: center;
}

.main > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.main > h1 {
  margin: 0;
  padding: 0;
}

.right {
  display: grid;
  grid-area: right;
  align-items: center;
  justify-items: end;
  align-self: center;
  grid-auto-flow: row;
}

.right > h2 {
  display: none;
  grid-row: 1;
  color: #008C00;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

body.grid-container:hover .right > h2 {
  display: unset;
}

.right > .fa-chevron-right {
  grid-row: 1;
  color: #008C00;
  margin: 10px;
  animation: passingright 3s infinite;
}

@keyframes passingright {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
}

.top {
  display: grid;
  grid-area: top;
  align-items: start;
  justify-items: center;
}

.top > .fa-chevron-right {
  display: block;
  column-row: 1;
  color: #00008C;
  animation: passingtop 3s infinite;
}

@keyframes passingtop {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
}

.top > h2 {
  display: none;
  color: #00008C;
}

body.grid-container:hover .top > h2 {
  display: contents;
}

.left {
  display: grid;
  grid-area: left;
  align-items: center;
  justify-items: left;
  align-self: center;
  grid-auto-flow: row;
}
.left > h2 {
  display: none;
  grid-row: 1;
  color: #460046;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

body.grid-container:hover .left > h2 {
  display: unset;
}

.left > .fa-chevron-right {
  grid-row: 1;
  color: #460046;
  margin: 10px;
  animation: passingleft 3s infinite;
}

@keyframes passingleft {
0% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
}

.down {
  display: grid;
  grid-area: down;
  align-items: end;
  justify-items: center;
}

.down > .fa-chevron-right {
  color: #8C0000;
   animation: passingdown 3s infinite;
}

@keyframes passingdown {
0% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
opacity: 0;
}
}

.down > h2 {
  display: none;
  color: #8C0000;
  }

body.grid-container:hover .down > h2 {
  display: contents;
}

我期望

body.grid-container.top.fa-chevron-right:hover .top > h2 {
display: contents;
}

将h2文本悬停在动画图标上时，可在顶部显示h2文本，但是我唯一可以使用的代码是下面的代码，该代码太宽泛而无法使用。

body.grid-container:hover .top > h2 {
  display: contents;
}

将鼠标悬停在另一个网格项目上时更改网格项目的显示状态

0 个答案: