1

編集：この編集の前に、私はCSSを含む解決策を求めていました。次のタスクを完了するにはJavascriptが必要であると通知されました

説明：メンバーの完全なプロファイルを表示するクラス（profile-inner）があります。背景色は白です。プロファイル内部で作業するためにホバーを取得しました。背景色は灰色です。クラス「profile-footer」にリンク「Comment」があります。クリックすると、クラス「inline-profile-comment」（展開/折りたたみ）が切り替わります。

問題：「profile-inner」ホバーは、切り替えられたクラス「inline-profile-comment」を含むコンテナー全体を選択します。これいらない。「inline-profile-comment」が表示されていない場合にのみホバーしたい。

HTML：

<div class="profile-inner">
  an entire profile

    <div class="profile-footer">
      <a data-toggle="collapse" data-target="#<%= profile_item.id %>_comment">
       Comment</a> 
       <ul><li>lots of list items etc</li></ul>

       <div class="inline-profile-comment">
      <div id="<%= profile_item.id %>_comment" class="show collapse">
     The comment form
   </div></div>

 </div></div>

CSS：

.profile-inner {
  background-color: rgb(255, 255, 255);
}

.profile-inner:hover {
  background-color: rgb(243, 243, 243);
  cursor: pointer;
}

私はそれを十分に説明したと思います。ご協力いただきありがとうございます。

4

3 に答える 3

1

これが概念実証です。私は、オブジェクトのメイン要素（この場合はプロファイル内部）の状態を切り替えるのが大好きです。基本的に、「hide-comment」状態を使用してCSSルールを定義し、コメントフォームを切り替えてホバーします。

http://jsfiddle.net/amustill/NgzU6/

于 2012-10-08T22:37:31.600 に答える
0

add/removeトグルが起こった後のクラスで、cssホバーのセレクターをそのclassように変更すれば、これを行うことができると思います。

JS

$('.profile-inner').toggleClass('hover');
$('.profile-footer a').on('click', function(e){
    e.preventDefault();
    $('.inline-profile-comment').toggle('fast',function(){
        $('.profile-inner').toggleClass('hover');
    });
});

CSS

profile-inner {
    background-color: rgb(255, 255, 255);
}
.profile-inner.hover:hover {
    background-color: rgb(243, 243, 243);
    cursor: pointer;
}
.inline-profile-comment{ display:none; }

実例。

于 2012-10-08T22:37:31.630 に答える
0

あなたはあなたが持っていることをすることができ、さらにこれを追加することができます：

.profile-inner:hover .inline-profile-comment {
    background-color: Whatever it should be; }
于 2012-10-08T22:27:04.073 に答える