Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
galera...
este código abaixo é com código para fazer COLLAPSE, funciona perfeitamente em brownsers, porém no THUNDERBIRD e programas de emails, enfrento problemas, mas tentando aqui, copiando código alí e aqui, consegui resolver para que funcione no THUNDERBIRD.
.collapseCss {
margin-top: 50px;
width: 50%;
}
.collapseCss .collapseContent {
margin-bottom: 4px;
margin-bottom: 15px;
}
.collapseCss .collapseHeader,
.collapseCss .collapseBody {
padding: 10px;
display: block;
border: 1px solid #dbdbdb;
}
.collapseCss .collapseHeader {
width: 100%;
border: 1px solid #dbdbdb;
cursor: pointer;
border-radius: 5px;
transition: background-color .15s ease-in-out;
}
.collapseCss .collapseHeader:hover {
background-color: #dbdbdb;
}
.collapseCss .collapseBody {
background-color: #f4f4f4;
margin-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: none;
}
.collapseCss .collapseContent:hover .collapseBody {
display: block;
}
</style>
<div class="collapseCss">
<div class="collapseContent">
<div class="collapseHeader">Collapse2</div>
<div class="collapseBody">Content collapse2.</div>
</div>
</div>
Agora, tipo.
Ao passar o mouse em cima, clicar, ele EXPANDE.
até ai, td bem...
mas COMO POSSO ao passar o mouse, clicar, ele fixar FIXO, depois de sair o foco.
e depois somente, quando clicar novamente, ele RETORNE ao modo COLLAPSE.
Mas lembrando, programas de emails, não suportam javascript, jquery, então, tem que ser só em CSS, tem COMO isso acima?
sugestões, agradeço de como implementar...
Obrigado.GALERA
Para ser melhor na explicação, seguem outros dois exemplos que testei no THUNDERBIRD, onde eles funcionam este COLLAPSE:
HTML
<div class="container">
<div class="collapse_html">
<div class="collapse_conteudo">
<div class="collapse_header">COLLAPSE - Esse funciona em programa de emails</div>
<div class="collapse_body">Depending on what browsers to put up with for non-compliant browsers you may want to check out the</div>
</div>
</div>
</div>
<div class="container">
<span><b>COLLAPSE - Não funciona em programas de emails</b></span>
<ul>
<li>
Depending on what browsers/devices you are looking to browsers you may want to check out the
</li>
</ul>
</div>
**CSS**
.collapse_html {
margin-top: 50px;
width: 50%;
}
.collapse_html .collapse_conteudo {
margin-bottom: 4px;
margin-bottom: 15px;
}
.collapse_html .collapse_header,
.collapse_html .collapse_body {
padding: 10px;
display: block;
border: 1px solid #dbdbdb;
}
.collapse_html .collapse_header {
width: 100%;
border: 1px solid #dbdbdb;
cursor: pointer;
border-radius: 5px;
transition: background-color .15s ease-in-out;
}
.collapse_html .collapse_header:hover {
background-color: #dbdbdb;
}
.collapse_html .collapse_body {
background-color: #f4f4f4;
margin-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: none;
}
.collapse_html .collapse_conteudo:hover .collapse_body {
display: block;
}
li {
padding: 5px;
}
ul {
overflow: hidden;
max-height: 0px;
list-style: none;
transition: max-height 0.3s;
}
span:hover+ul {
max-height: 500px;
position: fixed;
background-color: dodgerblue;
color: white;
width: 100%;
height: auto;
padding: 5px;
}
A única coisa que gostaria de FAZER é: ambos os dois exemplos acima, ao PASSAR O MOUSE, ele exibe pelo HOVER a DIV abaixo, porém, EU GOSTARIA DE ao exibir, DEIXAR a DIV FIXA, mesmo ao tirar o ponteiro do mouse de cima.
TEM COMO FAZER isso, tem alguma taxa para usar no HOVER????
1) Deixar a DIV fixa na tela ao passar o mouse em cima do link;
2) Só fechar a DIV se clicar DAÍ no link novamente,
Tem como?
Sugestões de códigos, exemplos agradeço.
É o único collapse que testei que funciona no thunderbird, só preciso fazer isso....
basicamente oq preciso, é: