bugfix> javascript > 投稿

私の質問は単純です、私はそれに対する直接の答えを見つけられなかったので、ここに:私は2つのボックスを持っています、私は最初の1つをホバーしたいが2番目のものに影響を与えます(最初のものをホバーするとき、2番目のものはこれを行うべきです(変換:scale(1.2) ; 遷移:すべての0.9秒のイーズインアウト;))。 cssで可能ですか、それともjavascriptも必要ですか? 私のコード:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
.a {
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
}
.c{
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
}
.d:hover {
 transform: scale(1.2);
  transition: all 0.9s ease-in-out;
}
</style>
</head>
<body>
<div class="a b">Hover me</div>
<div class="c d">Affect me</div>
</body>
</html>

回答 2 件
  • cssを使用すると、使用できるはずです + 直接の兄弟の場合または ~ 一部の間接的な兄弟の場合

    .b:hover + .c {
     transform: scale(1.2);
      transition: all 0.9s ease-in-out;
    }
    
    

  • コンビネータセレクタを使用する必要があります。

    div {
      display: inline-block;
      margin: 30px;
      font-weight: bold;
    }
    .a {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 100px;
      text-align: center;
    }
    .c {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 100px;
      text-align: center;
    }
    .a:hover + .d {
      transform: scale(1.2);
      transition: all 0.9s ease-in-out;
    }
    
    
    <div class="a b">Hover me</div>
    <div class="c d">Affect me</div>
    
    

あなたの答え