Intrebare CSS - when hover element, display other element

#1
MooF2010

Posted 18 January 2014 - 22:54

Senior Member

Grup: Senior Members
Posts: 5,325
Î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,325
Î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,325
Î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

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

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