0

我在这里搜索后尝试了几种补救措施，但似乎无法成功。

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>

任何想法表示赞赏！

4

2 回答 2

0

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

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

简介现在是简介容器的子项，而简介容器又是三角形的兄弟。这将允许您使用 css 兄弟选择器~来访问它们。

或者，您甚至不需要 blurbs 容器。它可能会使样式更容易一些，但您可以通过让 blurbs 成为块元素而三角形是display: inline-block;. 这会将所有三角形放在同一条线上，并在其下方撞击一个简介。给它 100% 的宽度，它应该是你想要的。

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

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

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

希望有帮助！

于 2013-10-03T23:53:33.030 回答
0

更新： 我意识到我的回答可能有点快，以至于忽略了你正在做的事情。我假设你的文本简介与三角形不同，这将使这不可能......但是，如果文本意味着位于图像或类似布局的正下方，您可以将简介移动到三角形包装器内部，在其相应的三角形图像下方，然后使用相邻的 css 选择器（与您在评论中发布的示例完全相同）隐藏和显示它们。如果你需要一个例子，请告诉我。

纯 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');
});

假设你给每个三角形一个 rel attr 等同于简介文本 id

于 2013-10-03T19:31:25.870 回答