Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
casa verde 2024

Intrerupator cu N - doza doar cu ...

Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata
 Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii

Impozite pe proprietati de anul v...
 teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...

Rezultat RMN
 Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD.
 

CSS /java script hover image

- - - - -
  • Please log in to reply
6 replies to this topic

#1
sorin86

sorin86

    Member

  • Grup: Members
  • Posts: 797
  • Înscris: 16.12.2012
Salutare,

Am si eu o rugaminte daca se poate sa ma ajutati , as vrea sa fac un image hover (tip eticheta) atunci cand treci cu mouse-ul pe el si pe eticheta sa pun un buton de download si ceva text. Va atasez imaginea, dar fara a face reclama acest effect hover este prezent pe scribd.


Multumesc

Attached Files



#2
Mizu

Mizu

    moroșan

  • Grup: Senior Members
  • Posts: 18,725
  • Înscris: 10.12.2006
Cauta solutii cu jquery: http://www.sundogint...query-hover-box

#3
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Nu-i neaparat de jQuery, poti realiza asta si cu CSS.

//clasa pe care vei face hover
.main {
position: relative;
}
//clasa care va aparea
.pop-up {
position: absolute;
display: none;
si ii pui tu o pozitie care sa fie similara cu aia, o rezolvi tu din margin
}
//this is where the magic happens
.main:hover > .pop-up {
display: block;
}

//in html o sa ai cv de genul

<div class="main">

<p>Lorem ipsum dolor sit amet consectetur adipiscing bla bla elit...</p>

<div class="pop-up">
Aici bagi ce ai de bagat poze text si butonu ala de download.
</div><!-- .pop-up end -->

</div><!-- .main end -->


Voila, done.

Edited by Alexandrwc, 25 September 2014 - 14:42.


#4
Mizu

Mizu

    moroșan

  • Grup: Senior Members
  • Posts: 18,725
  • Înscris: 10.12.2006
Sunt cam ruginit ca n-am mai lucrat de ceva ani in CSS, dar codul tau impinge elementele prin pagina, sau le poti face sa se ascunda, dar nu deschide popup deasupra lor.
Desi presupun ca s-ar putea face similar unui meniu dropdown daca te chinui... insa apar probleme la unele browsere, pe cand cu javascript vei avea un rezultat constant si mai usor de realizat.

#5
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013

View PostSfPetru, on 25 septembrie 2014 - 16:56, said:

Sunt cam ruginit ca n-am mai lucrat de ceva ani in CSS, dar codul tau impinge elementele prin pagina, sau le poti face sa se ascunda, dar nu deschide popup deasupra lor.
Desi presupun ca s-ar putea face similar unui meniu dropdown daca te chinui... insa apar probleme la unele browsere, pe cand cu javascript vei avea un rezultat constant si mai usor de realizat.
Nu impinge nimic prin pagina, daca te uiti atent ai sa vezi ca are "position: absolute;" Posted Image
Si obtii acelas rezultat in toate browserele.

Am observat ca e oarecum incomplet css-ul, ar mai merge adaugat si urmatorul cod:
.pop-up:hover { display: block; }


Pentru ca banuiesc ca o sa vrei sa dai click prin pop-up si nu vei putea pentru ca imediat ce scoti mouse-ul de pe .main, .pop-up devine invizibil.

Iata codul testat daca nu crezi ca merge http://jsfiddle.net/1028q8sq/ :)

Edited by Alexandrwc, 25 September 2014 - 17:41.


#6
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Si ca sa ii fac pe plac si lui SfPetru:
$('.main').on('click', function() {
if($(this).children('.pop-up').hasClass('active')) {
	 $(this).children('.pop-up').removeClass('active');
}
else { $(this).children('.pop-up').addClass('active'); }
})


Si ii faci tu ce ii faci clasei active cu display: none bla bla ce am scris mai sus.

Edited by Alexandrwc, 25 September 2014 - 18:15.


#7
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Desigur, poti face .addClass() cu .on('mouseenter') si .removeClass() cu .on('mouseleave');

Anunturi

Neurochirurgie minim invazivă 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

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate