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

我在这里搜索后尝试了几种补救措施，但似乎无法完成此项工作。取消隐藏图像链接悬停的另一个div

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>

任何想法是值得赞赏！

来源

2013-10-03 Mojoe

jsFddle将不胜感激 – 2013-10-03 19:28:54

你想单词被隐藏，然后显示悬停？不可能 - 他们是图像。 –

现在我知道你到底是如何把它摆出来，我正在写一个新的答案。虽然你可能需要这些模糊的图片来跨越整个宽度，但它们仍然非常接近元素，这意味着它们可以制作成兄弟姐妹。以此为例：

<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容器的孩子，而该容器又是三角形的同胞。这将允许您使用css兄弟选择器~来访问它们。

或者，您甚至不需要blurb容器。它可能会使得样式变得更容易，但您可以通过将blurb设置为块元素来完成此布局，而三角形为display: inline-block;。这将把所有的三角形放在同一条线上，并在它下面碰撞一下。给它100％的宽度，它应该是你想要的。

这里有一个小提琴，显示如何在不容器做到这一点，和兄弟选择：

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

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

希望帮助！

来源

2013-10-03 23:53:33

Blake我不能够感谢你！去给这个去！ – Mojoe

嘿，布莱克你可以雇用这样的小型CSS编码工作吗？ – Mojoe

对不起，我现在大部分时间都有相当大的工作量。 –

UPDATE： 我意识到，我的回答可能是有点快解雇你在做什么。我认为你必须在不同的区域中的文本广告词比三角形这将使这是不可能的。 ..但是，如果文本的目的是在图像下方或类似的布局下方，则可以将blurb移动到三角形包装的内部，它们对应的三角形图像下方，然后使用相邻的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'); 
});

假设你已经给每个三角形一个相对ATTR相当于Blurb的文章ID

来源

2013-10-03 19:31:25

感谢您的信息！我原本试图使用这个，但它似乎并没有在我的网站上工作：http://codepen.io/Pixelizm/pen/ICpKv – Mojoe

是的，在这个例子的情况下，它的作品，因为隐藏的元素/ showing是悬停元素的直接兄弟，它允许CSS选择器访问它。 –

这很有道理布莱克。可能你能指向我的资源，可以帮助我使用Javascript来实现这一目标吗？再次感谢！ – Mojoe

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

回答

相关问题