Question

我确定这是一个简单的问题要回答，我很抱歉成为另一个提出这类问题的菜鸟，但我花了大约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，你需要在css中使用display：none隐藏所有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 ...它很难回答，因为它不是理论的忠实粉丝......你已经提出了你的整个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来解决这个问题。

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

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

3 个答案: