Показать и скрыть div с помощью css

В моем script есть 3 div. Я хочу отображать div с классом ab при наведении на первую строку и отображать div с классом abc, когда наведите курсор на вторую строку. В противном случае я хочу diplay div с классом по умолчанию.

Но он никогда не отображает div с классом a.

HTML:

<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

CSS

.abc,.ab {
    display: none;
}
#f:hover ~ .ab {
    display: block;

}
#f:hover ~ .abc,.a {
    display: none;

}
#s:hover ~ .abc {
    display: block;

}
#s:hover ~ .ab,.a {
    display: none;
}

Вот моя сценарий моей проблемы http://jsfiddle.net/mridulpv/n5fzB/1/

Ответы

Ответ 1

Вам нужно

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Обновлено демо на http://jsfiddle.net/gaby/n5fzB/2/

Проблема в исходном CSS заключалась в том, что селектора , в css запускает совершенно новый селектор. он не комбинируется.. поэтому #f:hover ~ .abc,.a означает #f:hover ~ .abc и .a. Вы устанавливаете его на display:none, поэтому он всегда должен быть скрытым для всех элементов .a.

Ответ 2

Чтобы скрыть элемент, используйте:

display: none;
visibility: hidden;

Чтобы показать элемент, используйте:

display: block;
visibility: visible;

Разница заключается в следующем:

Видимость обрабатывает видимость тега, display обрабатывает пространство, которое он занимает на странице.

Если вы установите visibility и не меняете display, даже если теги не видны, он по-прежнему занимает пространство.

Ответ 3

вы можете использовать любой из следующих пяти способов скрыть элемент, в зависимости от ваших требований.

Opacity

.hide {
  opacity: 0;
}

Видимость

.hide {
   visibility: hidden;
}

Дисплей

.hide {
   display: none;
}

Позиция

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

клип путь

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Чтобы показать использование любого из следующего: непрозрачность: 1; видимость: видимая; дисплей: блок;

Источник: https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

Ответ 4

Код HTML:

    <a id="f">Show First content!</a>
    <br/>
    <a id="s">Show Second content!!</a>
    <div class="a">Default Content</div>
    <div class="ab hideDiv">First content</div>
    <div class="abc hideDiv">Second content</div>

Script код:

$(document).ready(function() {
    $("#f").mouseover(function(){
        $('.a,.abc').addClass('hideDiv');
        $('.ab').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });

    $("#s").mouseover(function(){
        $('.a,.ab').addClass('hideDiv');
        $('.abc').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });
});

Код css:

.hideDiv
{
    display:none;
}