Intrebare CSS - when hover element, display other element

#1
MooF2010

Posted 18 January 2014 - 22:54

Senior Member

Grup: Senior Members
Posts: 5,330
Înscris: 24.05.2010

Vreau sa fac un meniu folosind doar css.

Si am inceput prin css (primul buton)

#main{
display:none;
}
a.meniu1:hover ~#main {
	display: block;
}

si partea de html din site

<meniu>
	  <div class="butoane">
	   <a href="" class="meniu1" >Main</a> <a href="" >Echipa</a> <a href="" >Competitii</a> <a href="" >Finante</a> <a href="" >Optiuni</a> <a href="" >Ajutor</a>
	  </div>
	  <div id="main">
	   dasdasdas
	  </div>
	 </meniu>

Ideea este ca atunci cand tin mousul pe Main nu imi afiseaza acel "dasdasdas" nicaieri.

Cum trebuie sa scriu css ?

Back to top

#2
Nemesis-

Posted 18 January 2014 - 23:11

Zeits�

Grup: Senior Members
Posts: 7,253
Înscris: 23.05.2011

~ selecteaza elementele urmatoare de pe acelasi nivel.
#main nu e pe acelasi nivel.

nu se poate ce vrei u cu css.
doar daca muti :hover pe .butoane

Back to top

#3
poadol

Posted 19 January 2014 - 01:04

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

Poate te inspiri de aici:

<!DOCTYPE html>
<head><style>div {visibility:hidden}</style></head>
<html>
<body>
<div id="ex1"><p>Text dasdasdas</p></div>
<button type="button" onclick="myFunction()">Arata</button>
<script>
function myFunction()
{
document.getElementById("ex1").style.visibility="visible";
}
</script>

</body>
</html>

Asa cu "visibility" iti pastreaza spatiul necesar pentru div.

Sau asa poti ascunde din nou div-ul:

<!DOCTYPE html>
<head><style>div {visibility:hidden}</style></head>
<html>
<body>
<div id="ex2"><p>Text dasdasdas</p></div>
<button type="button" onclick="DisplayMenu()">Arata1</button>
<script>
function DisplayMenu(obj_id) {
  var obj = document.getElementById("ex2");
  obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
</script>
</body>
</html>

Back to top

#4
MooF2010

Posted 21 January 2014 - 13:46

Senior Member

Grup: Senior Members
Posts: 5,330
Înscris: 24.05.2010

am reusit, multumesc mult

Back to top

#5
Tiberiu_Alexander

Posted 26 January 2014 - 06:46

Member

Grup: Members
Posts: 338
Înscris: 05.01.2010

Abordarea e din start complet greșită. Cel mai simplu (și corect de altfel) este să folosești liste neordonate. Poți crea câte nivele de submeniuri vrei și toate pot fi afișate la hover.

Back to top

#6
MooF2010

Posted 26 January 2014 - 10:41

Senior Member

Grup: Senior Members
Posts: 5,330
Înscris: 24.05.2010

nu era submeniu... era un buton aflat intr-o parte si un element aflat in partea cealalta a site-ului

Back to top

Anunturi

Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

Intrebare CSS - when hover element, display other element

#1 MooF2010 Posted 18 January 2014 - 22:54

#2 Nemesis- Posted 18 January 2014 - 23:11

#3 poadol Posted 19 January 2014 - 01:04

#4 MooF2010 Posted 21 January 2014 - 13:46

#5 Tiberiu_Alexander Posted 26 January 2014 - 06:46

#6 MooF2010 Posted 26 January 2014 - 10:41

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
MooF2010

Posted 18 January 2014 - 22:54

#2
Nemesis-

Posted 18 January 2014 - 23:11

#3
poadol

Posted 19 January 2014 - 01:04

#4
MooF2010

Posted 21 January 2014 - 13:46

#5
Tiberiu_Alexander

Posted 26 January 2014 - 06:46

#6
MooF2010

Posted 26 January 2014 - 10:41