"hover" avec Internet exploreur

**Dauphin** · 12/10/2014, 01h51

Bonsoir,

comme d'habitude, c'est encore IE qui pose problème

Le but de ma page : affichage d'un tableau de données avec la possibilité de le modifier via un select qui s'affiche au passage de la souris sur la cellule concernée.

Mon code HTML (en condition "normale", seul le <span> est visible:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<td class="ma_classe">
	<span>contenu</span>
	<select name="j['.$i.']"  style="display:none">
		<option value="0">option 0</option>
		<option value="1">option 1</option>
		<option value="2">option 2</option>
		<option value="3">option 3</option>
	</select>
</td>

mon code JS. Le but est d'effacer le <span> et d'afficher le <select> lors du survol de la case du tableau, et l'inverse quand la souris quitte la case, aprés mise à jour du <span< avec le nouveau choix du <select>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script>
	$(".ma_classe").hover(function(){
			$("span", this).css({ display: "none"});
			$("select", this).css({ display: "inline"});		
		},function(){
			str = $("select option:selected", this).text();
			$("span", this).text(str);
			$("select", this).css({ display: "none"});
			$("span", this).css({ display: "inline"});
	});
</script>

Avec Firefox, chrome, opéra tout fonctionne nickel. En revanche avec IE impossible de selectionner une option du <select> qui s'efface dès que la souris arrive dessus

Pour le moment la seule solution que j'ai trouvé sur IE c'est d'afficher 'en fixe' tous les <select> mais du coup ça surcharge mon tableau et ça ne correspond plus à ce que je souhaitais mettre en oeuvre ...

Quelqu'un aurait-il une idée IE compatible pour résoudre ce problème ?

Merci déjà de m'avoir lu jusque là !

**danielhagnoul** · 12/10/2014, 10h52

Bonjour

CSS du select, pas "inline" mais "block".

**Dauphin** · 12/10/2014, 11h21

Merci de t’intéresser à mon problème.

Malheureusement, inline ou block ne modifie en rien le comportement sous IE (ni sous les autres d'ailleurs !)

**danielhagnoul** · 12/10/2014, 14h58

Je viens de tester sur IE11 et effectivement il y a un bogue. Il envoie des rafales de "mouseleave" dès que le pointeur bouge sur le "select". C'est OK avec l'événement "change".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjTD = $( "td.ma_classe" ),
        jObjSpan = $( "td.ma_classe > span" ),
        jObjSelect = $( "td.ma_classe > select" );
 
    jObjTD.on( "mouseenter", function(){
        jObjSpan.css( "display", "none" );
        jObjSelect.css( "display", "block" );        
    });
 
    jObjSelect.on( "change",function( event ){
        // debug, console, F12
        //console.log( event );
        // IE11 envoie des rafales de "mouseleave" dès que le pointeur bouge sur le "select"
        // C'est OK avec l'événement "change"
 
        jObjSpan.text( $("option:selected", jObjSelect ).text() );
        jObjSpan.css( "display", "block" );
        jObjSelect.css( "display", "none" );        
    });
 
});

**NoSmoking** · 12/10/2014, 16h35

Bonjour,
le comportement des SELECT sous IE et le reste du monde est très différent sur pas mal de point, gestion des événements styling des OPTION...

Si tu veux obtenir la même chose suivant les différents navigateurs il te faut utiliser ce qu'il y a de commun, ce qu'à fait Daniel en utilisant l'événement onchange.

En ce qui te concerne je pense qu'il est même inutile de cacher le SPAN, le SELECT pouvant se trouver devant celui ci et donc le cacher quand il est rendu visible.

Il restera toujours un soucis lorsque tu quitteras les TD, le dernier restant affiché si il n'y pas eu de changement.

Une autre alternative est de ne pas utiliser de SELECT mais une LI qui elle a le même comportement sur le over sur tous les navigateurs, si tu entres sur la TD le survol des enfants ne déclenchera pas un out.

avec une structure assez propche d'un SELECT

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<td class="ma_classe"><span>contenu</span>
    <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
    </ul>
</td>

tu peux simplement simuler la même chose ( code à la louche)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$('.ma_classe').on('mouseover', function () {
    $('ul', this).show();
});
 
$('.ma_classe').on('mouseout', function () {
    $('.ma_classe ul').hide();
});
 
$('.ma_classe li').on('click', function () {
    $(this).parent().hide().parent().find('span').text($(this).data('value'))
});

le reste n'est qu'une question de CSS

exemple complet:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>SELECT remplacé</title>
<meta name="Author" content="NoSmoking">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body{
  font-family : Verdana;
  font-size : 1em;
}
table{
  border-collapse:separate;
  border-spacing:2px;
  border: 1px solid #CCC;
}
.ma_classe{
  position:relative;
  width:6em;
  border: 1px solid #CCC;
  line-height:1.5em;
}
span:before{
  content:"\25BC";
  color:#888;
  font-size:0.8em;
  display:block;
  float:right;
}
.ma_classe ul{
  position:absolute;
  display:none;
  list-style:none;
  margin:0;
  padding:0;
  top:-1px;
/*  top:100%;  /* si on le veut en dessous */
  left:-1px;   /* tiens compte de la border */
  right:-1px;  /* tiens compte de la border */
  border:1px solid #CCC;
  background:#FEFEFE; /* important */
  cursor:pointer;
  line-height:1.5em;
  box-shadow: 0 6px 12px #CCC;
}
.ma_classe ul li{
  padding-left:0.25em;
  border:1px solid #FFF;
}
.ma_classe ul li:hover{
  background:#DDD;
}
</style>
</head>
<body>
<table>
  <tr>
    <td class="ma_classe"><span>contenu</span>
      <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
      </ul>
    </td>
    <td class="ma_classe"><span>contenu</span>
      <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
      </ul>
    </td>
  </tr>
</table>
<script>
$('.ma_classe').on('mouseover', function () {
    $('ul', this).show();
});
$('.ma_classe').on('mouseout', function () {
    $('.ma_classe ul').hide();
});
$('.ma_classe li').on('click', function () {
    $(this).parent().hide().parent().find('span').text($(this).data('value'))
});
</script>
</body>
</html>

**Dauphin** · 12/10/2014, 23h22

Bonsoir,

le code de Daniel en passant pas le change fonctionne de la même façon sur tous les navigateur, c'est un progrès

le soucis c'est que mon tableau contient une dizaine de cases "modifiables". Or là le passage sur une case affiche tous les select qui prennent tous la valeur de l'option choisie ... De plus si on ne modifie rien dans le select; il ne s'efface pas ... J'ai essayé plusieurs truc pour résoudre tout ça mais sans sucés

Je vais regarder ce que donne la proposition via les listes ... ce que je ne comprends pas c'est comment transmettre les données modifiées ?? Avec les select pas de soucis je reçois tout en post quand la page est validée mais les li ne sont pas dans les données postées ...

"hover" avec Internet exploreur

jQuery

Vue hybride

Partager

Partager