Question

我在这里搜索后尝试了几种补救措施，但似乎无法使其发挥作用。

2个单独的div：1个div，在单独的列中有4个图像链接（每个都有一个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>

感谢任何想法！

Answer 1

<强>更新我意识到我的答案可能会有点快速地忽略你正在做的事情。我假设你的文字模糊在不同的区域而不是三角形会使这个变得不可能......但是，如果文字意味着在图像或类似布局的正下方，您可以将模糊移动到三角形包装内部，在相应的三角形图像下方，然后使用相邻的css选择器（与您在注释中发布的示例完全相同）来隐藏并告诉他们。如果您需要一个例子，请告诉我。

Pure CSS不能用于创建此类效果。这样做的原因是CSS是顺序的，并且只能以向内和向前的方式应用。基本上，CSS选择器只能应用于一个元素，它是它后面的兄弟姐妹，或它的孩子。选择父元素或元素“族”之外的元素不是CSS应该用于的东西。

这样的效果通常会通过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');
});

假设您已经为每个三角形赋予了与模糊文本ID相等的rel attr

Answer 2

现在我确切地知道你如何布置它，我正在写一个新的答案。虽然你可能需要模糊跨越整个宽度，但它们仍然非常接近元素，这意味着它们可以被制成兄弟姐妹。以此为例：

<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容器。它可能使样式更容易一些，但您可以简单地通过使blurb成为块元素来完成此布局，而三角形是display: inline-block;。这会将所有三角形放在同一条线上，并在其下方碰上一个模糊。给它100％的宽度，它应该是你想要的。

这是一个小提琴，展示如何在没有容器和兄弟选择器的情况下执行此操作：

#wrapper #tri1:hover ~ #blurb1 { display: block; }

http://jsfiddle.net/cJJtc/1/

希望有所帮助！

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

2 个答案: