CSS 和 Jquery 悬停

Question

编辑：在此编辑之前，我要求提供涉及 CSS 的解决方案。我被告知我需要 Javascript 来完成以下任务

说明：我有一个显示成员完整个人资料的类（profile-inner）。它的背景颜色是白色。我已经悬停在 profile-inner 工作。它的背景颜色是灰色。 “profile-footer”类中有“评论”链接。当它被点击时，它会切换类“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;
}

我希望我已经解释得足够好。感谢您的帮助。

Answer 1

这是一个概念证明。我非常喜欢在对象的主要元素上切换状态，在这种情况下是你的 profile-inner。本质上，我们所做的是使用“隐藏评论”状态来定义我们的 CSS 规则，切换评论表单和悬停。

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

Answer 2

如果你在切换发生后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; }

Working Example.

Answer 3

你可以做你有的，加上这个：

.profile-inner:hover .inline-profile-comment {
    background-color: Whatever it should be; }