1

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

描述：我有一个显示成员完整个人资料的类（profile-inner）。它的背景颜色是白色。我已经悬停在 profile-inner 工作。它的背景颜色是灰色。“profile-footer”类中有“评论”链接。单击它时，它会切换类“inline-profile-comment”（展开/折叠）。

问题：“profile-inner”悬停选择整个容器，包括切换类“inline-profile-comment”。我不想要这个。我只希望在未显示“inline-profile-comment”时悬停。

网页：

<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

这是一个概念证明。我非常喜欢在对象的主要元素上切换状态，在这种情况下是你的 profile-inner。本质上，我们所做的是使用“隐藏评论”状态来定义我们的 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 回答