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

在这里搜索后，我尝试了几种补救方法，但似乎无法奏效

2个单独的div:1个div，在单独的列中有4个图像链接（每个都有CSS淡入淡出滚动效果），下面一个div，在一个全宽列中有一行简单的文本。我试图隐藏文本div，并在三角形图像翻转时显示它

以下是图片链接和第一个文本简介，如下所示：

这里的文本
此处文本
更新：
我意识到我的回答可能有点太快了，以至于忽略了你正在做的事情。。我假设你的文本模糊在不同的区域，而不是三角形，这将使这不可能。。。但是，如果文本要位于图像或类似布局的正下方，则可以将模糊移动到三角形包装的内部，位于其相应的三角形图像的下方，然后使用相邻的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";
};

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

有关完整示例，请参见此小提琴：

（我不是javascript方面的专家，所以我相信有更有效的方法可以做到这一点，但这是可行的！）

我倾向于使用jQuery来简化我的javascript，这类似于：

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

假设你给每个三角形一个rel attr，相当于blurb文本id，现在我已经确切地知道了它的布局，我正在写一个新的答案。虽然您可能需要模糊来跨越整个宽度，但它们仍然非常接近元素，这意味着它们可以制作为同级。以此为例:

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

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


希望有帮助
 JSFIDLE会很感激你想隐藏这些文字，然后在悬停时显示出来吗？不可能-它们是图像。感谢您提供的信息！我最初试图使用它，但在我的网站上似乎不起作用：是的，在这个例子中，它起作用是因为隐藏/显示的元素是hover元素的直接同级元素，它允许CSS选择器访问它。这是有道理的Blake。你能给我指一个资源，帮助我使用Javascript实现这一点吗？再次感谢！我添加了一个示例，说明如何在javascript和jQuery中实现这种效果。您可能需要查看javascript事件侦听器以获取更多信息。非常感谢！我正在尝试这个解决方案。嘿，布莱克，你可以雇用像这样的小型CSS编码工作吗？对不起，我现在大部分时间的工作量都很满。