Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Deadpool & Wolverine (2023)

Outlook e muta pe Android

Constructie Mun. Iasi. Casa P+1.

Cum mai rezolvati cu chiriasii ra...
 Tastatura si mouse cu baterie int...

AC Gree duce la palpait de becuri

Sfat / recomandare construire aco...

Cablu analog vs digital
 Ce valoare stabiliti la RSSI la u...

Sony FH 10W reparatie

Monitor cu consum URIAS

Topul rușinii la nivelul PE
 probleme domeniu sau configuratie...

Se poate vedea on-line filmul ...

Mazda 3 IV Sedan 2.0 e-SkyActiv-G...

NATO - Articolul 5
 

Css3 hover delay

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

#1
life190

life190

    Junior Member

  • Grup: Members
  • Posts: 132
  • Înscris: 13.02.2012
Salut. Am un div care cu ajutorul unui :hover ii schimb backgound image. As vrea sa fac cu css3 ca aceasta schimbare intre backgound-uri sa se faca cu un fade. nu gasesc nimic pe net care sa mearga. Multumesc!

#2
Tiberiu_Alexander

Tiberiu_Alexander

    Member

  • Grup: Members
  • Posts: 338
  • Înscris: 05.01.2010
Backgroundul este o imagine, un gradient sau doar o culoare?

Edited by Tiberiu_Alexander, 28 June 2012 - 22:58.


#3
life190

life190

    Junior Member

  • Grup: Members
  • Posts: 132
  • Înscris: 13.02.2012

View PostTiberiu_Alexander, on 28th June 2012, 23:56, said:

Backgroundul este o imagine, un gradient sau doar o culoare?
imagine, png

#4
Tiberiu_Alexander

Tiberiu_Alexander

    Member

  • Grup: Members
  • Posts: 338
  • Înscris: 05.01.2010

View Postlife190, on 29th June 2012, 00:14, said:

imagine, png

Atunci tranzițiile CSS3 nu cred că vor funcționa pentru un efect de fade.

Edited by Tiberiu_Alexander, 28 June 2012 - 23:42.


#5
life190

life190

    Junior Member

  • Grup: Members
  • Posts: 132
  • Înscris: 13.02.2012
Atunci cu jquery cum as putea face?
Am ceva gen asa:
.clasa{background-image:imagine.png}
.clasa:hover{background-image:imagine1.png}
Merge dar vreau cu un fade.

#6
trackback

trackback

    Active Member

  • Grup: Members
  • Posts: 1,394
  • Înscris: 04.08.2011
Cu jQuery.
<div id="parent">
		<div class="background first">

		</div>
</div>
In exemplul de mai sus, div-ul .background este cel la care doresti sa faci fadeIn.
Acesta face parte din 2 clase cel putin. Clasa 1: background, si clasa 2: first sau second, fiecare cu background-image diferit.

Procedezi asa la hover (cu jquery):
1. Dai fadeOut() sau hide() la div.background
2. Ii stergi clasa .first ( adica ii inlaturi imaginea de background )
3. Ii adaugi clasa .second ( adica ii atribui noua imagine de background )
4. Ii dai fadeIn()

#7
tracius01

tracius01

    Active Member

  • Grup: Members
  • Posts: 1,339
  • Înscris: 11.11.2007
http://css3.bradshaw...ises.com/cfimg/

#8
life190

life190

    Junior Member

  • Grup: Members
  • Posts: 132
  • Înscris: 13.02.2012
Faza e ca nu am acces la div ci doar la clase... Sunt facute cu jquery.. deci as vreas fac cum arata link-ul de mai sus dar am acces doar la clase.Cum fac asta?

View Posttrackback, on 29th June 2012, 02:28, said:

Cu jQuery.
<div id="parent">
		<div class="background first">

		</div>
</div>
In exemplul de mai sus, div-ul .background este cel la care doresti sa faci fadeIn.
Acesta face parte din 2 clase cel putin. Clasa 1: background, si clasa 2: first sau second, fiecare cu background-image diferit.

Procedezi asa la hover (cu jquery):
1. Dai fadeOut() sau hide() la div.background
2. Ii stergi clasa .first ( adica ii inlaturi imaginea de background )
3. Ii adaugi clasa .second ( adica ii atribui noua imagine de background )
4. Ii dai fadeIn()
Poti sa imi arati codul te rog frumos, ca nu imi iese...:(

#9
yoshumi

yoshumi

    Junior Member

  • Grup: Members
  • Posts: 151
  • Înscris: 27.02.2009
Pai nu e greu.
Ai doua imagini acolo una peste cealalta si tu cand dai hover peste o imagine ii face opacitatea 0 si la cealalta foloseste efectele din trazitie depinzand de browser.
Problema ar fi ca nu cred ca toate versiunile de browser ar suporta asta.

#10
life190

life190

    Junior Member

  • Grup: Members
  • Posts: 132
  • Înscris: 13.02.2012

View Postyoshumi, on 3rd July 2012, 21:04, said:

Pai nu e greu.
Ai doua imagini acolo una peste cealalta si tu cand dai hover peste o imagine ii face opacitatea 0 si la cealalta foloseste efectele din trazitie depinzand de browser.
Problema ar fi ca nu cred ca toate versiunile de browser ar suporta asta.
pai pot pune o imagine una peste alta doar din css?

#11
oSerX

oSerX

    Active Member

  • Grup: Members
  • Posts: 1,033
  • Înscris: 23.06.2006
poti pune imagine una peste alta cu position:fixed; top:x, left:y sau chiar cu position:absolute; ... depinde ce vrei sa faci acolo ... si folosesti z-index ca sa definesti ce imagine sa fie deasupra.

Anunturi

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

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