Mostrar e esconder o div com o css
mas nunca mostra div com classe 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;
}
4 answers
Tu precisas
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,
#f:hover ~ .a{
display: none;
}
Demonstração actualizada em http://jsfiddle.net/gaby/n5fzB/2/
O problema no seu CSS original era que o , nos selectores de css inicia um selector completamente novo. não está combinado.. então #f:hover ~ .abc,.a significa #f:hover ~ .abc e .a. Você configurou isso para display:none para que fosse sempre colocado para ser escondido para todos os elementos .a.
Para esconder um elemento, use:
display: none;
visibility: hidden;
Para mostrar um elemento, use:
display: block;
visibility: visible;
A diferença é:
A visibilidade lida com a visibilidade da marca, o display lida com o espaço que ocupa na página.
Se você definir o visibility e não alterar o {[[2]}, mesmo que as etiquetas não sejam vistas, ainda ocupa espaço.
Você pode usar qualquer uma das seguintes cinco maneiras de esconder o elemento, depende de suas necessidades.
Opacidade
.hide {
opacity: 0;
}
Visibilidade
.hide {
visibility: hidden;
}
Visor
.hide {
display: none;
}
Posição
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
Clip-path
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
Para mostrar a utilização de qualquer um dos seguintes: opacidade: 1; visibilidade: visível; ecrã: bloco;
Fonte : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/
Código 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>
Código do Programa:
$(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');
});
});
Código Css:
.hideDiv
{
display:none;
}