Я уверен, что это простой вопрос для ответа, и я сожалею, что был еще одним 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 как можно больше.
Заранее спасибо, Мэтт.
Без 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 */
}
Вы можете использовать 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-х строчное решение для этого !! :)
Вы не будете использовать 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...