Как заставить div исчезать при наведении курсора, а другой появляться?

Question

Как заставить div исчезать при наведении курсора, а другой появляться?

0

Я хочу иметь 2 divs с непрозрачностью. Тот, который присутствует, и тот, который присутствует, когда a. зависает. → Из-за непрозрачности первый div должен исчезнуть, чтобы не быть видимым, когда появляется вторая.

Я попытался сделать это:

<div id="box">
    <a href="#" class="infobox">Hover me<div class="HideNseek">This is hidden.</div></a>
</div>

#box {
    background-color: rgba(0,0,0,0.6);
    height: 480px;
    width: 600px;
    padding: 15px;
    float: left;
    margin-left: 200px;
    margin-top: 120px;
}
a.infobox {
    position: relative;
    text-decoration: none;
}
a.infobox div.HideNseek {
    display: none;
    z-index: 100;
}
a.infobox:hover div.HideNseek {
    display: block;
    background-color: rgba(0,0,0,0.6);
    height: 480px;
    width: 600px;
    padding: 15px;
    float: left;
    margin-left: -15px;
    margin-top: -34px;
}

Как заставить первый div исчезнуть?

Glenn 14 дек. 2013, в 18:39

Источник

Теги:

html

css

hover

opacity

1 ответ

Ещё вопросы

ggdx · Answer 1 · 2013-12-14T14-04-00.000Z

Используйте jQuery -

$('.infobox').hover(function(){
   $(this).parent('div').hide();
});

Чтобы он снова появился:

$('.infobox').hover(function(){
   $(this).parent('div').hide();
},function(){
   $(this.parent('div').show())
});

Я абсолютно ужасен с jQuery, вставив это, заставляет div исчезнуть, однако второй div не появляется? + первый div остается скрытым, тогда как мне нужно, чтобы он снова появился снова.
Конечно, нет. Второе дитя первого. Если вы хотите скрыть первое, содержимое в нем будет скрыто.
Я обновил свой ответ, чтобы он появлялся снова при наведении курсора - обратите внимание, что при исчезновении элемента div: hover больше не будет применяться. Вам нужно переосмыслить структуру div, чтобы это работало.