2

我的 html 是（只有标题）

<div id="msg_wrapper">
    <div class="msg_header media unread>
      <a class="pull-left"></a>
      <div class="media-body">
        <h4 class="media-heading">
        </h4>
      </div>
    </div>
    <div id="side" class="pull-right">
      <div id="sent_at">
        <div class="timeago" >
        </div>
      </div>
      <div id="msg_header_side">
        <div id="msg_header_icons">
        </div>
          </div>
        </div>
      </div>

CSS是

    .media.unread:hover + #side  #msg_header_side{
    visibility: visible;
    }

    #sent_at {
        float:right;
    }
    .msg_header{
        position: relative;
        margin-bottom: 10px;
    }

    #msg_header_side{
        visibility: hidden;
    }
    #msg_header_icons{

        background-color: transparent;
        float: right;
    }

    #side{
        position: absolute;
        top: 0;
        right: 0;
    }

    #msg_wrapper{
        position: relative;
    }

我创建了一个带有类似标签的jsfiddle，并添加了颜色来解释情况

蓝色 ( #msg_header_side) 是一个带有选项的部分，当鼠标悬停在黄色 ( ) 的任何部分时应该出现的选项.msg_header问题是当前选择器（我能做的最好的）只有当鼠标光标位于黄色时才会显示蓝色。

像这样（屏幕截图没有捕获鼠标光标 - 它是黄色的）：

在此处输入图像描述

当光标位于红色 ( #side) - 蓝色消失

像这样（屏幕截图没有捕获鼠标光标 - 它是红色的）： 在此处输入图像描述

我的选择器是 .media.unread:hover + #side #msg_header_side 我理解的“媒体类别，当悬停时未读并与 msg_header_side 作为孩子将具有可见性：可见性。效果不太好..

4

3 回答 3

1

我不确定“+”号，但这应该是一些问题：

.media.unread:hover,
#side  #msg_header_side{
visibility: visible;
}
于 2012-12-10T13:53:01.047 回答
1

您需要添加一个额外的选择器来匹配#msg_header_side作为 descandant of#side:hover

.media.unread:hover + #side #msg_header_side, #side:hover #msg_header_side

希望那是你想要的。

于 2012-12-10T13:59:53.633 回答
1

我不太确定你想要达到什么目的，但我认为你想要使用黄色背景的 element1 和红色背景的 element2，如果你将它们都悬停，那么应该出现蓝色的 element3。首先你应该意识到你的黄色元素没有包围红色元素，因为它们是兄弟元素，堆叠顺序告诉我们红色元素通常在它的前一个兄弟元素的顶部，这个兄弟元素必须是黄色的。通过输入红色元素，您将留下黄色元素和您的选择器：

原来的：

.media.unread:hover + #side  #msg_header_side {
    visibility: visible;
}

告诉浏览器向我们显示带有#msg_header_side(blue) id 的元素，如果悬停带有类.media.unread(yellow) 的#side's(red) 同级元素，它必须是#side(red) 元素的子元素。

要告诉浏览器在红色元素也悬停时显示该元素，您必须将代码附加到第一行并按如下方式更改：

改变：

.media.unread:hover + #side  #msg_header_side, #side:hover  #msg_header_side {
    visibility: visible;
}

如您所见，仅更改了第一行。

PS我很抱歉我写的一团糟:)你也可以重新考虑你的选择器命名有这么多的类和ID它肯定会更好。

于 2012-12-10T16:04:40.553 回答