7

私はこのLESSセットアップを持っています:

.wrapper {
    .parent {
       height: 100px;

       .children {
          //some style;

          &:hover {

              .parent & {
                 height: 150px;
              }
          }
       }
    }
}

その中の子にカーソルを合わせて、親要素の高さを変更する必要があります。このコードは機能していません。これを行うことは可能ですか? 助けてくれてありがとう。

4

3 に答える 3

3

ここでの主な問題は、残念ながら、CSSで子のセレクター( の有無にかかわらず)の観点から、親のスタイルを設定できないことです。:hoverこちらの回答を参照してください。

親のセレクターに従って子をスタイル設定するか、相互のセレクターに従って兄弟をスタイル設定することしかできません。

もちろん、javascript/jQuery を使用してこれを実現する簡単な方法はありますが、

出力が CSS であるため、LESS にはありません。そのため、上記の制限が再び適用されます。

しかし、幸いなことに、子の一部のプロパティは親の一部のプロパティに影響を与えます。そのため、子のスタイルを設定すると、親にも影響を与えます。子 (ブロック) が親 (ブロック) の相対的な内側に配置されている場合、親に対して特別なことを何もしなくても、親は子の ( 、およびを含む) にheight適応する必要があります。heightpaddingmarginborder

デモ

.parent {
  width:200px;
  background:orange;
}
.child {
  background:red;
  width:100px;
  height:100px;
}
.child:hover {
  height:200px;
}
<div class="parent">
  <div class="child"></div>
</div>

于 2013-05-21T16:42:36.110 に答える
0

CSS を次のようにします。

.parent.over {
   /* whatever style you want when teh child is hovered over */
}

jQuery の使用:

$(".children").hover(
    function() {
        $(this).closest(".parent").removeClass("over").addClass("over");
    }, function() {
        $(this).closest(".parent").removeClass("over");
    }
);
于 2016-05-17T23:44:36.873 に答える