Intrebare CSS - when hover element, display other element

#1
MooF2010

Posted 18 January 2014 - 22:54

Senior Member

Grup: Senior Members
Posts: 5,337
Î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,337
Î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,337
Î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 cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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