Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Problema activare Xbox live gold ...

Fluierat Astra H 1.9 CDTI

Excel - Intrebare referitoare la ...
 Caut dentist care sa pune plombe ...

Grinzi suspendate

BluRay Player 4k

Calorifer
 Dovada talon

Denumire Club de Noapte

Știri legate de Stația ...

Sfat achizitie componente
 Locul unde se salveaza jocurile

Analizator antena Ringexpert

Spionul - The Spy (2019)

Versuri melodie
 

CSS /java script hover image

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

#1
sorin86

sorin86

    Member

  • Grup: Members
  • Posts: 794
  • Î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: 17,637
  • Î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: 17,637
  • Î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

Bun venit pe Forumul Softpedia!

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