Question

我的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）任意部分时应显示的选项问题是当前选择器（我能做的最好）只有在鼠标光标为黄色时才显示蓝色。

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

enter image description here

当光标处于红色（#side）时 - 蓝色消失

像这样（截图没有捕获鼠标光标 - 它是红色的）： enter image description here

我的选择器是.media.unread:hover + #side #msg_header_side 我如何理解这是“媒体类和未读时徘徊和与msg_header_side一起作为孩子将具有可见性：可见。效果不好......

Answer 1

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

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

Answer 2

您需要添加一个额外的选择器以匹配#msg_header_side #side:hover

的后代

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

{{1}}

希望你想要的。

Answer 3

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

的 ORIGINAL： 的

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

告诉浏览器向我们展示带有#msg_header_side（蓝色）id的元素，如果＃side（红色）兄弟与类.media.unread（黄色）混在一起，它必须是#side（红色）元素的子元素。< / p>
告诉浏览器显示元素，如果红色元素也悬停，你必须将代码附加到第一行并按如下方式更改：

的 ALTERED： 的

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

如你所见，只有第一行被改变了。

P.S。我很抱歉我写的这个烂摊子:)你也可以重新考虑你的选择器命名有那么多的类和ID它肯定会更好。

用于显示后代的CSS选择器无法正常工作

3 个答案: