在另一个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 ...