在另一個div內的鏈接懸空時出現div

Question

我確定這是一個簡單的問題來回答，我很抱歉成爲另一個noob問這種類型的問題，但我花了大約45分鐘試圖使用其他論壇帖子讓這個工作，我無法弄清楚。我想要的是，當我的網頁上的訪問者將鼠標懸停在我旗幟中的某個鏈接上時，會出現包裝中該位置的生物div。真的不知道是怎麼回事字，但這裏是我目前擁有的代碼，我曾嘗試不同的事情，但是這是最新代碼一堆到目前爲止，我已經寫了...

<div class="banner"> 
    <div class="banner_list"> 
     <div class="column" id="column_1"> 
      <p><a href="" id="bittaford_link">Bittaford</a></p> 
     </div> 
     <div class="column" id="column_2"> 
      <p><a href="" id="gateway_link">Gateway (Cattledown)</a></p> 
     </div> 
     <div class="column" id="column_3"> 
      <p><a href="" id="ridgeway_link">Ridgeway (Plympton)</a></p> 
     </div> 
    </div> 
</div> 

<div class="wrapper"> 
    <div class="church_bio" id="bittaford_bio">Bittaford</div> 
    <div class="church_bio" id="gateway_bio">Gateway</div> 
    <div class="church_bio" id="ridgeway_bio">Ridgeway</div> 
</div> 

和它背後的CSS ...

.banner_list { 
     width: 660px; 
     height: 500px; 
     margin: 100px auto; 
     padding: 40px 60px; 
     background-color: rgba(10, 10, 10, 0.9); 
    } 

     .banner_list p, 
     .banner_list a, 
     .banner_list h1 { 
      text-align: center; 
      color: #FFFFFF; 
      text-decoration: none; 
      font-weight: 100; 
     } 

     .column { 
      width: 200px; 
      margin-top: 50px; 
      float: left; 
     } 

      #column_1, #column_2 { 
       margin-right: 30px; 
      } 


.wrapper { 
    width: 100%; 
    height: 1000px; 
    top: 728px; 
    background-color: #FFFFFF; 
    position: absolute; 
    z-index: 200; 
} 

    .church_bio { 
     background-color: yellow; 
    } 

    #bittaford_bio #bittaford_link:hover { 
     background-color: red; 
    } 

    #gateway_bio #bittaford_link:hover { 
     background-color: red; 
    } 

    #ridgeway_bio #bittaford_link:hover { 
     background-color: red; 
    } 

我想我已經給更多的代碼比我需要，但我不知道，如果你把所有的代碼，到目前爲止，它會更有幫助。也儘量避免js。

在此先感謝，馬特。

Answer 1

您可以在鼠標懸停事件上使用javascript onmouse，並且需要使用display：none在css中隱藏所有的church_bio。

的CSS

.banner_list { 
     width: 660px; 
     height: 500px; 
     margin: 100px auto; 
     padding: 40px 60px; 
     background-color: rgba(10, 10, 10, 0.9); 
    } 

     .banner_list p, 
     .banner_list a, 
     .banner_list h1 { 
      text-align: center; 
      color: #FFFFFF; 
      text-decoration: none; 
      font-weight: 100; 
     } 

     .column { 
      width: 200px; 
      margin-top: 50px; 
      float: left; 
     } 

      #column_1, #column_2 { 
       margin-right: 30px; 
      } 


.wrapper { 
    width: 100%; 
    height: 1000px; 
    top: 728px; 
    background-color: #FFFFFF; 
    position: absolute; 
    z-index: 200; 
} 

    .church_bio { 
display:none; 
     background-color: yellow; 
    } 

    #bittaford_bio #bittaford_link:hover { 
     background-color: red; 
    } 

    #gateway_bio #bittaford_link:hover { 
     background-color: red; 
    } 

    #ridgeway_bio #bittaford_link:hover { 
     background-color: red; 
    } 

JS

<script> 
function show(id,type) 
{ 
if (type==1) 
{ 
document.getElementById(id).style.display="block"; 
} 
if (type==2) 
{ 

document.getElementById(id).style.display="none"; 
} 
} 
</script> 

HTML

<div class="banner"> 
    <div class="banner_list"> 
     <div class="column" id="column_1"> 
      <p><a href="" onmouseover="show('bittaford_bio',1);" onmouseout="show('bittaford_bio',2);" id="bittaford_link">Bittaford</a></p> 
     </div> 
     <div class="column" id="column_2"> 
      <p><a href="" " onmouseover="show('gateway_bio',1);" onmouseout="show('gateway_bio',2);" id="gateway_link" >Gateway (Cattledown)</a></p> 
     </div> 
     <div class="column" id="column_3"> 
      <p><a href="" onmouseover="show('ridgeway_bio',1);" onmouseout="show('ridgeway_bio',2);" id="ridgeway_link">Ridgeway (Plympton)</a></p> 
     </div> 
    </div> 
</div> 

<div class="wrapper"> 
    <div class="church_bio" id="bittaford_bio">Bittaford</div> 
    <div class="church_bio" id="gateway_bio">Gateway</div> 
    <div class="church_bio" id="ridgeway_bio">Ridgeway</div> 
</div> 

Answer 2

如果沒有的jsfiddle ...這是相當困難的回答爲m不是理論的忠實粉絲...你已經把你的整個CSS/HTML，只有下一次相關部分！ ;）

力念你完整的代碼，但在這裏是簡單的方法，讓你開始：
startup jsfiddle

HTML

<a href="#" class="first"> i am a link</a> 
<div class="show_on_hover"></div> 

CSS

.show_on_hover { 
     border:1px solid #000; 
     width: 100px; 
     height: 100px; 
     display:none; /* hide by default */ 
    } 
    a.first:hover + div.show_on_hover { 
     display:block; 
     /*this is the trick....use "+" sign 
     to bind the "on-hover" element and to-show element/div */ 
    } 

Answer 3

你贏了不會使用javascript for這個問題。

如果你正在使用jQuery，這裏是另一種解決方案：

$("#bittaford_link").mouseover(function() { 
    $("#bittaford_bio").show(); 
}); 
$("#bittaford_link").mouseout(function() { 
    $("#bittaford_bio").hide(); 
}); 

對於一個CSS唯一的解決辦法：利用該佈置是行不通的元素。你可以做的就是使用+運算符，在鏈接之後指定一個內容容器，將它與絕對座標對齊，並將其懸停在鏈接上。

HTML

<a href="" id="bittaford_link"></a><div id="bittaford_bio"></div> 

CSS

#bittaford_link:hover + #bittaford_bio { display: block; } 
#bittaford_bio { position: absolute; display: none; top: /* ... */, left: /* ... */ } 

但是，這是醜陋的地獄，只是用javascript ...