Question

Edit: Before this edit, I was asking for solutions involving CSS. I was notified that I would need Javascript to complete the following tasks

Description: I have a class (profile-inner) that displays a member’s complete profile. It’s background color is white. I have gotten a hover to work for profile-inner. It’s background color is gray. There is the link “Comment” in class “profile-footer”. When it is clicked, it toggles the class “inline-profile-comment” (expand/collapse).

Problem: The “profile-inner” hover selects the whole container including toggled class “inline-profile-comment”. I do not want this. I only want the hover when “inline-profile-comment” is not shown.

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;
}

I hope I have explained it good enough. Thanks for your help.

Answer 1

I think you can do this if you add/remove a class after the toggle happened and change the css selector for hover to that class, like

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; }

Working Example.