1つにカーソルを合わせると、別のCSSに影響します

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>

javascript

html

css

回答 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>

あなたの答え

関連記事