mouseenter et mouseleave

[epeichette]

Bonjour

j'ai un script tout simple qui me permet de cacher une image quand je suis dessus pour faire afficher du texte à la place.

Voila la code :

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
31
32
33
34
35
36
37
38
<div id="home-explain">
    			<ul>
    				<li class="first-row">
    					<h2><?= $this->translate('Create your professionnal website')?></h2>
    					<div>
        					<img src="/images/site_web.jpg" width="283" height="126" alt="" />
        					<p id="home-website-txt"><?= $this->translate('home website description')?></p>
    					</div>
    				</li>
    				<li class="middle first-row">
    					<h2><?= $this->translate('A tools easy to use')?></h2>
    					<div>
        					<img src="/images/tools.jpg" width="283" height="126" alt="" />
        					<p id="home-tool-txt"><?= $this->translate('home tools description')?></p>
    					</div>
    				</li>
    				<li class="first-row">
    					<h2><?= $this->translate('An hight performance referencing')?></h2>	
    					<div>			
        					<img src="/images/traffic.jpg" width="283" height="126" alt="" />
        					<p id="home-performance-txt"><?= $this->translate('home referencing description')?></p>
    					</div>
    				</li>		
    			</ul>	
<script type="text/javascript">
//<![CDATA[
	jQuery("#home-explain li div").mouseenter(function(){ 	
		jQuery(this).children('img').hide();		
		jQuery(this).children('p').show();		
		return false;
		})
	.mouseleave(function(){ 				
		jQuery(this).children('img').show();		
		jQuery(this).children('p').hide();		
		return false;
	});
//]]> 
</script>

mon problème es que lorsque je me positionne la souris sur le border de la div, on n'arrête pas de switcher entre l'image et le texte.

Avez-vous une solution qui permettrait de ne pas avoir cet effet?

Merci d'avance pour votre aide

[Loceka]

Placer la souris au milieu du div ?

Sérieusement, tu peux essayer de minimiser ce comportement en demandant à ta fonction de ne pas s'exécuter avant tant de temps après sa dernière exécution mais tu ne pourras pas contrer ce comportement.

[Bovino]

Envoyé par epeichette

Avez-vous une solution qui permettrait de ne pas avoir cet effet?

Utilise outline au lieu de border dans le CSS (mais je ne suis pas sûr de la compatibilité pour IE).