时间戳

首页 > 解决方案 > 将鼠标悬停在另一个网格项上时更改网格项的显示状态

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

问题描述

我有一个基本的 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 文本，但我可以使用的唯一代码是下面的代码，它太宽泛而无用。

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

标签： htmlcsscss-grid

解决方案

推荐阅读