Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Rename SQL column

Achiziționare tuner TV !

Din ce este facuta terasa asta?

Cum accesez site-ul CNAS ?
 Algoritm simplu de calculare al u...

Bitdefender Total Security ș...

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
 

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,726
  • Î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,726
  • Î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

Chirurgia cranio-cerebrală minim invazivă 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

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