Texte qui se change au survol

Version imprimable

20/04/2015, 12h27
Nikolas78

Texte qui se change au survol

Bonjour bonjour !

J'ai trouvé dans un template de Wordpress un texte qui, au survol de la souris, se change en un texte différent !
http://pixelgrade.com/demos/rosa2/shop/

Sous les images, le prix, au passage de la souris, affiche "ADD TO CART"

Je ne m'y connais pas trop en JavaScript (et à mon avis, il y a du JS là dessous).
J'aimerais pouvoir faire la même chose sur un nouveau site que je développe.

Quelqu'un pourrais m'expliquer svp ?

Merci beaucoup d'avance :)

Bonjour,

Je te propose une solution parmi les nombreuses possibles, avec jquery :

Code:

1
2
3
4
<div class="product">
    <div class="price">$15</div>
    <a class="pdt_btn" href="#">ADD TO CARD</a>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.pdt_btn').hide();
 
$(".product").mouseover(function(){
 
    $(this).find('.price').hide();
    $(this).find('.pdt_btn').show();
 
}).mouseleave(function(){
 
    $(this).find('.price').show();
    $(this).find('.pdt_btn').hide();    
 
});

https://jsfiddle.net/L7Lfjnrh/

JavaScript n'est pas nécessaire et encore moins jQuery. Cela peut se faire simplement en CSS: http://codepen.io/anon/pen/qdWJYp

Code:

1
2
3
4
5
 
<div class="fade-btn">
  <span class="fadeout">17.36 €</span>
  <a href='#' class="fadein">ADD TO CART</a>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
.fade-btn {
  text-align: center;
  margin: 2em auto;
  background: #DDD;
  width: 10em;
  height: 1em;
  font-size: 2em;
  position: relative;    
}
 
 
.fadeout, .fadein {
  text-align: center;  
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transition: opacity 0.3s ease;
}
 
 
.fadein,
.fade-btn:hover .fadeout {
  opacity: 0;
}
 
 
.fadeout,
.fade-btn:hover .fadein {
  opacity: 1;
}

30/04/2015, 11h48
Nikolas78

Super merci beaucoup !! C'est ce qu'il me fallait :D

Bonne journée et à bientôt :)