Question

我有两种情况：

悬停上的第一个（顶部）按钮显示红色字母-在这种情况下，按钮的直接父级（<body>标签）是红色字母的间接父级
第二个按钮不同-它的直接父级不是红色字母的父级

是否可以仅将CSS悬停在第二个按钮之后用红色字母显示div？

/* First button - works*/
.aaa:hover ~ .eee .fff .ggg { opacity: 1; height: 17px }

/* Second button - not work :( */
.ccc:hover ~ .eee .fff .ggg { opacity: 1; height: 17px }



/* set up */
div { transition: all 1s }

.ggg { opacity: 0; height: 0; color: red}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5FFF6D 0%, rgba(195, 255,113, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(95, 255, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  margin: 5px;
}

<div class="aaa btn">Hover me... works :) </div>

<div class="bbb">
  <div class="ccc btn">Hover me...  :( </div>
</div>

<div class='eee'>E
  <div class='fff'>F
    <div class='ggg'>G</div>
    <div class='hhh'>H</div>
  </div>
</div>

显示悬停的div不在悬停的同一个父对象中

0 个答案: