Unhide another div on image link hover - css

Question

I've tried several remedies after searching here but can't seem to make this work.
2 separate divs: 1 div with 4 image links in separate columns (each has a CSS fade rollover effect), and one div underneath with a simple line of text in a full-width column. I'm trying to hide the text div and reveal it upon triangle image rollover.
Here's a link with the images and the first text blurb shown below: 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>
Any ideas are appreciated!

Answer 1

Now that I know exactly how you have it laid out, I'm writing a new answer. While you may need the blurbs to span the full width, they are still very close to the elements, which means they could be made into siblings. Take this for example:
<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>
The blurbs are now a child of the blurbs container, which in turn is a sibling of the triangles. This would allow you to use the css sibling selector ~ to access them.
Alternatively, you don't even need the blurbs container.. It might make styling a little easier, but you could accomplish this layout simply by having the blurbs be block elements, whilst the triangles are display: inline-block;. This would put all the triangles on the same line, and bump a blurb down below it. Give it 100% width, and it should be what you want.
Here's a fiddle that shows how to do this with no container, and the sibling selector:
#wrapper #tri1:hover ~ #blurb1 { display: block; }
http://jsfiddle.net/cJJtc/1/
Hope that helps!

Answer 2

UPDATE:
I realized that my answer might have been a bit to quick to dismiss what you were doing.. I assumed that you had the text blurbs in a different area than the triangles which would make this impossible... However, if the text is meant to be right underneath the images or some similar layout, you can move the blurbs to be inside of the triangles wrapper, underneath their corresponding triangle image, and then use an adjacent css selector (exactly like the example you posted in the comments) to hide and show them. Let me know if you need an example.
Pure CSS cannot be used to create an effect such as this. The reason for this is that CSS is sequential, and can only be applied in an inward and onward fashion.. Basically, a CSS selector can only apply to an element, it's siblings which come after it, or it's children. Selecting parent elements, or elements outside of an element's "family" is not something that CSS should be used for.
An effect like this would typically be done with Javascript, which has much more power of selection.
For example:
document.getElementById('tri1').onmouseover=function(){
document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
document.getElementById('blurb1').style.display = "none";
};
See this fiddle for a full example:
http://jsfiddle.net/tQjd4/
(I'm not expert on javascript, so I'm sure there are more efficient ways to do it, but that works!)
I tend to use jQuery to shortcut my javascript, which would be something like:
$('#triangles a').hover(function(){
$('#'+$(this).attr('rel')).css('display','block');
}, function(){
$('#'+$(this).attr('rel')).css('display','none');
});
assuming that you've given each triangle a rel attr equivalent to the blurb text id