CSS和React：链接和悬停不适用于项目当项目与其他类嵌套在一起时，它确实起作用我在做什么错了？

如何解决CSS和React：链接和悬停不适用于项目当项目与其他类嵌套在一起时，它确实起作用我在做什么错了？

嵌套在full-post > full-post__textBox > full-post__textBox--buttons-container > full-post__textBox-tabs中的类“ tag-list”的链接为什么不起作用

当嵌套在full-post> full-post__image> tags-display-container > tags-list中时，工作确实有效

 return (
    <Aux>
      <div className="full-post">
        <div className="full-post__image">
          <Tags tags={post.tags} onSaveTags={onSaveTagsHandler}/>
          <img src={image} alt="kipburger" />
        </div>
        <div className="full-post__textBox">
          {title}
          <p>{post.author}</p>
          <div className="full-post__textBox--buttons-container">
          <div className="full-post__textBox-tabs">
          <a className="tag-item" href="/home">Overview</a><a
            className="tag-item"
          href="/home">Ingredienten</a><a
            className="tag-item"
          href="/home">Bereiding</a></div></div>
          
          <p>
          
          .... 

链接和悬停不适用于className“ tag-items”。他们确实在这里工作。下面的jsx中的标签组件看起来像这样：

  return (
      <a className="tag-item" href="/home"> <FiTag /> {props.text}   </a>
  );

<div className="tags-display-container">
        <div className="tags-list">
        {props.tags && props.tags.map(tag=><Tag key={tag.concat(tag.indexOf())} text={tag}/>)}</div></div>

这是我对标签组件和标签的理解

.tags-display-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.tags-list {
  margin: 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 90%;
}

.tag-item {
  display: block;
  background-color: black;
  opacity: 0.5;
  width: auto;
  font-size: 1.6rem;
  text-decoration: none;
  color: white;
  left: 0rem;
  top: 0rem;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;

  &:hover {
    opacity: 0.7;
    transform: scale(1.07) translateY(-1px);
  }
}

这是我的文本框的scss（链接和悬停DONT起作用的地方）

.full-post {
  width: 1000px;
  height: 500px;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;

  &__image {
    position: relative;
    height: 500px;
    width: 500px;
    float: left;

    & img {
      position: absolute;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: all 0.5s;
      z-index: 1;
    }
    & button {
      position: absolute;
      z-index: 5;
      right: 1rem;
      bottom: 1rem;
    }
  }

  &__tags-input {
    position: absolute;
    z-index: 5;
    right: 1rem;
    bottom: 4rem;
  }

  &-description--edit-mode {
    min-width: 300px;
  }

  &__textBox {
    position: relative;
    width: 500px;
    z-index: -1;
    padding-left: 4rem;
    padding-top: 2rem;

    &--buttons-container {
      display: inline-block;
      width: 30px;
      margin: 10px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      max-width: 90%;
    }

    &-tabs {
      display: flex;
      flex-direction: row;
      transform: rotate(90deg);
      left: 0;
      top: 0;
    }

    & h1 {
      font-size: 3.2rem;
      padding-bottom: 1rem;
    }

    & p {
      font-size: 1.6rem;
      padding: 1rem 3rem;
    }

    &--button {
      position: absolute;
      bottom: 2rem;
      right: 25%;
      transform: translate(50%,-50%);
      &-save {
        position: absolute;
        bottom: 2rem;
        right: 25%;
        transform: translate(50%,-50%);
      }
    }
  }
}