Наличие div появляется, когда ссылка внутри другого div находится

Question

Наличие div появляется, когда ссылка внутри другого div находится

0

Я уверен, что это простой вопрос для ответа, и я сожалею, что был еще одним 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 как можно больше.

Заранее спасибо, Мэтт.

user3108027 19 янв. 2014, в 14:46

Источник

2

плз создать jsfiddle.net
Mahmoude Elghandour 19 янв. 2014, в 12:49
0

я знаю, что вы говорите «избегать», но вы хотите чистого решения CSS или вы бы хотели использовать javascropt / jquery?
Phlume 19 янв. 2014, в 12:54

Теги:

html

css

hover

3 ответа

Ещё вопросы

я знаю, что вы говорите «избегать», но вы хотите чистого решения CSS или вы бы хотели использовать javascropt / jquery?

NoobEditor · Answer 1 · 2014-01-19T11-58-00.000Z

Без jsfiddle... довольно сложно ответить, поскольку я не большой поклонник теории... и вы положили весь свой css/html, после этого опубликуйте только соответствующую часть! ;)

dint читает, что вы полный код, но вот простой способ, чтобы вы начали:
Запуск 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 */
    }

Shn · Answer 2 · 2014-01-19T11-23-00.000Z

Вы можете использовать javascript onmouse поверх и на выводе мыши, и вам нужно скрыть все church_bio с помощью display: none в css.

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>

вопрос не помечен как JS или jQuery ..plus CSS предлагает только 2-х строчное решение для этого !! :)
Спасибо мужик, твой путь отлично работает! Спасибо за помощь. :)

Ke Vin · Answer 3 · 2014-01-19T10-52-00.000Z

Вы не будете использовать 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...