Покажите еще один div на картинке link hover

Question

Я пробовал несколько средств после поиска здесь, но, похоже, не могу сделать эту работу.

2 отдельных divs: 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

Теперь я точно знаю, как вы его выложили, я пишу новый ответ. Хотя вам могут понадобиться рекламные ролики, чтобы охватить всю ширину, они все еще очень близки к элементам, а это значит, что они могут быть сделаны в братья и сестры. Возьмите это, например:

<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 теперь ребенок контейнера реклам, который, в свою очередь, является сестринским треугольников. Это позволит вам использовать селектор css sibling ~ для доступа к ним.

В качестве альтернативы, вам даже не нужен контейнер для разметки. Это может сделать стиль немного проще, но вы можете выполнить этот макет, просто имея блокировки элементов блока, в то время как треугольники - display: inline-block;. Это поместило бы все треугольники в одну и ту же строку и подвешивает над ним снимок. Дайте ему 100% ширину, и это должно быть то, что вы хотите.

Вот скрипка, которая показывает, как сделать это без какого-либо контейнера, и селектор родственного:

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

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

Надежда, что помогает!

Answer 2

UPDATE: я понял, что мой ответ мог бы быть немного, чтобы быстро уволить, что вы делаете .. я предполагал, что вы имели текстовые аннотации в другой области, чем треугольники, которые сделали бы это невозможным. Однако, если текст должен быть прямо под изображениями или каким-либо подобным макетом, вы можете перемещать рекламные ролики внутри обертки треугольников под их соответствующим изображением треугольника, а затем использовать соседний селектор 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