Отображение и скрытие div с помощью css

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

но он никогда не отображает div с class 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/

34
css css3 hover html siblings

4 ответов

вам нужно 

.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 элементы.

32

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

display: none;
visibility: hidden;

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

display: block;
visibility: visible;

разница в том, что:

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

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

36

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

прозрачность

.hide {
  opacity: 0;
}

видимость

.hide {
   visibility: hidden;
}

дисплей

.hide {
   display: none;
}

позиция

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

clip-path

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

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

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

5

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>

код скрипта:

$(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;
}
1