Question

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

我找到了一些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

让您选择以下元素;子选择器（因此它们不需要相邻）。

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

1 个答案: