问取消隐藏图像链接上的另一个div

EN

现在我知道你是怎么布置的了，我正在写一个新的答案。虽然您可能需要的脱线跨越整个宽度，但他们仍然非常接近的元素，这意味着他们可以成为兄弟姐妹。举个例子：

<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/

希望这能帮上忙！

更新：，我意识到我的回答可能有点快，不去理会你正在做的事情。我以为你的文字是在不同的区域，而不是三角形，这将使这不可能.但是，如果文本恰好位于图像或一些类似的布局之下，则可以将空白页移动到三角形包装器的内部，在其对应的三角形图像下，然后使用相邻的css选择器(与您在注释中发布的示例完全相同)来隐藏和显示它们。如果你需要一个例子，请告诉我。

纯CSS不能用于创建这样的效果。这样做的原因是CSS是连续的，只能以内向和向前的方式应用。基本上，CSS选择器只能应用于元素，它是紧跟在元素后面的兄弟姐妹，或者是子元素。选择父元素或元素“家族”之外的元素不应该用于CSS。

这样的效果通常是用Javascript来完成的，因为Javascript具有更大的选择能力。

例如：

document.getElementById('tri1').onmouseover=function(){
   document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
   document.getElementById('blurb1').style.display = "none";
};

有关完整的示例，请参阅此小提琴：http://jsfiddle.net/tQjd4/

(我不是javascript的专家，所以我确信有更有效的方法可以做到这一点，但这是可行的！)

我倾向于使用jQuery快捷我的javascript，如下所示：

$('#triangles a').hover(function(){
    $('#'+$(this).attr('rel')).css('display','block');
}, function(){
    $('#'+$(this).attr('rel')).css('display','none');
});

假设您已经给了每个三角形一个等效于blurb文本id的rel attr