使div在另一个div中的链接悬停时显示

Question

我确信这是一个很容易回答的问题，很抱歉我是另一个新手在问这种类型的问题，但我已经花了大约45分钟尝试使用其他论坛帖子来解决这个问题，但我无法弄明白。我想要的是，当一个访问者在我的页面上悬停他们的鼠标在我的横幅中的一个链接，在包装器中出现该位置的bio 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，你需要在css中使用church_bio :none来隐藏所有的显示。

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……很难回答，因为我不是一个很喜欢theory...and的人，你已经把你的整个css/html放上去了，下次只贴相关的部分！！;)

我给你读完了完整的代码，但这里有一个简单的入门方法：

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来解决这个问题。

如果您使用的是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 ...