css - 如何在悬停另一个元素时显示一个元素？

Question

当用户悬停或点击图片时，如何显示 block /文本？

我找到了一些 good posts .

我还找到了外部资源。我去的每个地方都提供了类似这样的解决方案:

HTML

<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg</div>

CSS

#thumbnail {
    display: block;
    width: 150px;
    height: 150px;
}

#thumbnail:hover + #title {
    display: block;
}

#title {
    display: none;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    width: 130px;
    padding: 10px;
}

虽然我不明白我的代码做错了什么。这是我拥有的:

HTML

<div class="sqs-block image-block sqs-block-image" data-block-type="5" 
id="block-yui_3_17_2_2_1428673541254_6455"> </div>

<div class="sqs-block html-block sqs-block-html" data-block-type="2" 
id="block-yui_3_17_2_3_1429198468651_10272"><div class="sqs-block-content">
<p>I want this text to appear when the calendar image is hovered (and 
preferably clicked too)</p></div>

CSS

#block-yui_3_17_2_2_1428673541254_6455 {
    display: block !important;
}

#block-yui_3_17_2_2_1428673541254_6455:hover + 
#block-yui_3_17_2_3_1429198468651_10272 {
    display: block !important;
}

#block-yui_3_17_2_3_1429198468651_10272 {
    display: none;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    width: 130px;
    padding: 10px;
}

我实际上只是换掉了选择器以匹配我想要完成的事情:当用户将鼠标悬停在右侧的日历图像上时，我希望文本显示在左侧。我尝试过其他解决方案，与此类似但没有运气。我哪里出错了？

Answer 1

我找到了答案。

示例代码假定两个元素(静态图像和出现/消失的文本)是相邻的兄弟元素。

#thumbnail:hover + #title

See here来自回答的用户。

我重新排列了元素并使它们相邻。可以看到结果here .翻转日历图像。感谢所有发布者，真的很感激。

但这引出了一个问题:我需要对代码做些什么来创建相同的效果但元素不相邻？

编辑:Just learned it's not possible to select the parent of an element in CSS.但是我了解到将上面的代码更改为:

#thumbnail:hover ~ #title

让您选择下面的元素；子选择器(因此它们不需要相邻)。