取消隐藏图像链接上的另一个div
取消隐藏图像链接上的另一个div
提问于 2013-10-03 19:01:04
在这里搜索之后，我尝试了几种补救方法，但似乎无法成功。
两个独立的div :在不同的列中有4个图像链接的div (每个都有CSS褪色滚转效应)，而下面有一个div，在全宽列中有一个简单的文本行。我试图隐藏文本div，并在三角形图像滚动显示它。
下面是图片和第一个文本的链接，如下所示：http://goodsouldesign.com/redmont
<div id="triangles>
<a>image1</a>
<a>image2</a>
<a>image3</a>
<a>image4</a>
</div>
<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>任何想法都是值得赞赏的！
Stack Overflow用户
回答已采纳
发布于 2013-10-03 23:53:33
现在我知道你是怎么布置的了，我正在写一个新的答案。虽然您可能需要的脱线跨越整个宽度，但他们仍然非常接近的元素，这意味着他们可以成为兄弟姐妹。举个例子：
<div id="wrapper">
<a id="tri1"></a>
<a id="tri2"></a>
<a id="tri3"></a>
<a id="tri4"></a>
<div id="blurbs">
<div id="blurb1">Text here 1</div>
<div id="blurb2">Text here 2</div>
<div id="blurb3">Text here 3</div>
<div id="blurb4">Text here 4</div>
</div>
</div>blurbs现在是blurbs容器的子类，而blurbs容器又是三角形的兄弟姐妹。这将允许您使用css同级选择器~来访问它们。
或者，你甚至不需要这个信息容器。这可能会使造型变得更容易一些，但是您可以通过让blurbs是块元素来完成这个布局，而三角形是display: inline-block;。这将把所有的三角形放在同一条线上，并在其下方撞上一个短音。给它100%的宽度，它应该是你想要的。
这里有一个小提琴，它演示了如何在没有容器的情况下完成此操作，以及兄弟姐妹选择器：
#wrapper #tri1:hover ~ #blurb1 { display: block; }http://jsfiddle.net/cJJtc/1/
希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19167119
复制相关文章
相似问题
腾讯云开发者
