CSS：為什么 :hover 應用於整個網站，而不僅僅是應用於<div>它應用於元素？

Question

有這個問題，如描述中所述。 我希望:hover效果僅適用於父元素及其子元素，而不適用於整個網站。

試圖將指針事件添加到無，但沒有幫助。 此外，正如其他問題中所建議的，影響是對父母而不是兄弟姐妹，但這也沒有幫助。

這是我的代碼：

應用程序.js：

import "./styles.css";

export default function App() {
  return (
    <div>
      <div className="parent">
        <div className="child1">child1</div>
        <div className="child2">child2</div>
      </div>
      <div className="sibling">sibling</div>
    </div>
  );
}

CSS：

.App {
  font-family: sans-serif;
  text-align: center;
}

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #1a38e2;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s, -webkit-transform 0.2s;
  transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
    -webkit-transform 0.2s;
  transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s;
  transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s, -webkit-transform 0.2s;
}

.parent:hover::before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  width: 100%;
  z-index: -1;
}

我也有一個 SCSS，但不知道如何在 codeandbox 上處理它，但我還是應用了它：

社會保障局

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #1a38e2;
  transform: scaleY(0);
  transition: transform .2s, width .4s cubic-bezier(1, 0, 0, 1) .2s,
    background-color .1s;
}

parent::before {
  transform: scaleY(1);
  width: 100%;
  z-index: -1;
}

鏈接到我的代碼和框： 鏈接

我一如既往地對提供的任何幫助感到非常高興。

Answer 1

給出相對於 div 的位置

.parent div {
  position: relative;
}

代替

parent::before

用這個

   .parent div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #1a38e2;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s, -webkit-transform 0.2s;
  transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
    -webkit-transform 0.2s;
  transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s;
  transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
    background-color 0.1s, -webkit-transform 0.2s;
}

.parent div:hover::before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  width: 100%;
  z-index: -1;
}