Intrebare CSS - when hover element, display other element

#1
MooF2010

Posted 18 January 2014 - 22:54

Senior Member

Grup: Senior Members
Posts: 4,955
Î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: 4,955
Î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: 4,955
Î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

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

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