Soucis avec une div(hover)

**djoufouf** · 04/11/2015, 10h04

bonjour,

j ai un petit probleme de positionnement avec une div flotante, ai chercher plusieurs solution mais je ne trouve pas pourquoi elle reste dans ma scrollbar,

voici une image demontrant mon probleme

Nom : ererer.png
Affichages : 137
Taille : 40,6 Ko

Nom : ererer.png
Affichages : 137
Taille : 40,6 Ko

je tien a preciser que quand je ne le mets pas dans la scrollbar tout fonctionne correctement

voici mon code

ceci est ma div de mon hover

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ma-bulle {
    display: none;
    background-color:#DAE7FA;
    position: absolute;
    top: 1px;
    margin:20px;
    width: 400px;
    height: 135px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 2;
    border:1px solid #000000;
    opacity: 0.9;
}

et celle la est de mon scrollbar

Code css :

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

1
2
3
4
5
6
7
8
#essai {
    overflow:scroll;
    position:absolute;
    padding-left : 7px;
    width: 172px;
    height: 650px;
    text-overflow: ellipsis;
     overflow-x: visible ;<br>z-index: 2;<br> }

et voici le code html (sans le php)

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
<div id="National-delegations">
  <a class="liensND" style="text-decoration:none" href="TableauALL.php?id="><img src="images/.svg" , width=20px; />
    <div class="ma-bulle">
      <div class="hoverMepstitle">
        <b></b>
      </div>
      <div class="imgMepshover">
        <img src="images.svg" , width=110px; />
      </div>
      <div class="TextMepshover">
 
      </div>
    </div>
  </a>
</div>
<br>
</div>
 
<script>
$(function(){
  $('.liensND').click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    console.log($(this).attr('href'));
    $.get(url,function(data){
      $('#Container-Right').html(data);
    });
  });
});
</script>
<script>
$(function(){
    $(".liensND").hover(function() {
        var $elt = $(this); // cibler l'élément
        $elt.css("cursor","pointer"); // ajouter le pointer au survol (facultatif)
        var $ma_bulle = $elt.find('.ma-bulle'); // cibler la div .ma-bulle
                $ma_bulle.fadeIn("slow"); // un fade pour faire apparaître la div .ma-bulle
    },function(){
        var $elt = $(this);
        var $ma_bulle = $elt.find('.ma-bulle');
                $ma_bulle.css("display","none");
    });
});
</script>

si vous avez des solutions je suis prenneur car je bloque depuis deja quelque jours dessus

Merci a tous en tout cas

**NoSmoking** · 04/11/2015, 12h18

Bonjour,
comment veux tu qu'un élément qui appartient à un conteneur dont on lui demande de masquer ce qui dépasse, propriété overflow dépasse justement de ce conteneur parent ?

La solution passe par gérer une info-bulle extérieure au conteneur.

Note de modération :
Je supprime ta première discussion concernant ce même problème et t'engage fortement à lire les régles du club.
Merci d'en tenir compte à l'avenir.

**djoufouf** · 04/11/2015, 16h01

ok et tu fais cela comment ???

je suis larguer la

**djoufouf** · 05/11/2015, 10h31

comment je fais pour reprendre les informations de ma div a l interieur de se scroll bar pour la mettre en dehors ???

**NoSmoking** · 05/11/2015, 16h37

En HTML/CSS cela n'est pas possible, il te faut avoir recours au javascript pour gérer cela comme une "info-bulle".

Je te met 2 exemples de réalisation
• JavaScript "vanilla"

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Info Bulle simple</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  position:relative;
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.section {
  margin:0 2em 1em;
}
#data{
  width:10em;
  height:10em;
  border:3px double #abc;
  overflow-x:auto;
  overflow-y:auto;
}
#avatar {
  list-style:none;
  line-height:2em;
  padding:0;
  margin:0;
}
#avatar li {
  margin:0;
  cursor:pointer;
  text-indent:0.25em;
}
#avatar li:hover {
  background-color:#cde;
}
/*-- on cache les contenus --*/
.bulle {
  display:none;
  vertical-align:top;
  line-height:1em;
}
.bulle img{
  vertical-align:top;
  float:left;
  margin-right:0.25em;
}
/*-- L'info bulle --*/
#info_bulle {
  position:absolute;
  display:none;
  padding:0.5em;
  font-size:0.8em;
  border:1px solid #abc;
  background:#fff;
  min-width:25em;
  box-shadow:1px 1px 5px #888;
}
</style>
</head>
<body>
<div id="main">
  <h1>Info Bulle simple</h1>
  <div class="section">
    <h2>Quelques intervenants sur DVP</h2>
    <div id="data">
      <ul id="avatar">
        <li>Bovino<div class="bulle"><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif" alt="avatar">Bovino</div></li>
        <li>danielhagnoul<div class="bulle"><img src="http://www.developpez.net/forums/avatars/285162-danielhagnoul.gif" alt="avatar">danielhagnoul</div></li>
        <li>jreaux62<div class="bulle"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif" alt="avatar">jreaux62</div></li>
        <li>NoSmoking<div class="bulle"><img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt="avatar">NoSmoking</div></li>
        <li>sekaijin<div class="bulle"><img src="http://www.developpez.net/forums/avatars/42146-sekaijin.gif" alt="avatar">sekaijin</div></li>
        <li>SpaceFrog<div class="bulle"><img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif" alt="avatar">SpaceFrog</div></li>
        <li>SylvainPV<div class="bulle"><img src="http://www.developpez.net/forums/avatars/562435-sylvainpv.gif" alt="avatar">SylvainPV</div></li>
        <li>Vermine<div class="bulle"><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif" alt="avatar">Vermine</div></li>
        <li>Watilin<div class="bulle"><img src="http://www.developpez.net/forums/avatars/377824-watilin.gif" alt="avatar">Watilin</div></li>
      </ul>
    </div>
    <p>Toutes mes excuses à ceux que j'aurais oublié de lister.</p>
  </div>
</div>
<script>
// création conteneur info-bulle
var oBulle = document.createElement('DIV');
oBulle.id = 'info_bulle';
document.body.appendChild(oBulle);
 
var oClone,
    oInfo = document.querySelectorAll('#avatar li'),
    i, nb = oInfo.length;
 
for (i = 0; i < nb; i += 1) {
  oInfo[i].onmouseover = function(e) {
    e = e || window.event;
    // récup. élément
    oClone = this.querySelector('.bulle');
    if( oClone){
      // copie de l'information
      oClone = oClone.cloneNode(true);
      // contenu visible
      oClone.style.display = 'block';
      // place
      oBulle.style.left = (e.clientX + 10) + 'px';
      oBulle.style.top = (e.clientY + 10) + 'px';
      oBulle.appendChild(oClone);
      // affiche
      oBulle.style.display = 'block';
    };
  };
  oInfo[i].onmouseout = function() {
    // vide le contenu
    while (oBulle.firstChild) {
      oBulle.removeChild(oBulle.firstChild);
    }
    // masque
    oBulle.style.display = 'none';
  };
}
</script>
</body>
</html>

le code "efficace" à mettre en fin de fichier

Code javascript :

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
// création conteneur info-bulle
var oBulle = document.createElement('DIV');
oBulle.id = 'info_bulle';
document.body.appendChild(oBulle);
 
var oClone,
    oInfo = document.querySelectorAll('#avatar li'),
    i, nb = oInfo.length;
 
for (i = 0; i < nb; i += 1) {
  oInfo[i].onmouseover = function(e) {
    e = e || window.event;
    // récup. élément
    oClone = this.querySelector('.bulle');
    if( oClone){
      // copie de l'information
      oClone = oClone.cloneNode(true);
      // contenu visible
      oClone.style.display = 'block';
      // place
      oBulle.style.left = (e.clientX + 10) + 'px';
      oBulle.style.top = (e.clientY + 10) + 'px';
      oBulle.appendChild(oClone);
      // affiche
      oBulle.style.display = 'block';
    };
  };
  oInfo[i].onmouseout = function() {
    // vide le contenu
    while (oBulle.firstChild) {
      oBulle.removeChild(oBulle.firstChild);
    }
    // masque
    oBulle.style.display = 'none';
  };
}

• jQuery inside

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Info Bulle simple</title>
<meta name="Author" content="NoSmoking">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  position:relative;
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.section {
  margin:0 2em 1em;
}
#data{
  width:10em;
  height:10em;
  border:3px double #abc;
  overflow-x:auto;
  overflow-y:auto;
}
#avatar {
  list-style:none;
  line-height:2em;
  padding:0;
  margin:0;
}
#avatar li {
  margin:0;
  cursor:pointer;
  text-indent:0.25em;
}
#avatar li:hover {
  background-color:#cde;
}
/*-- on cache les contenus --*/
.bulle {
  display:none;
  vertical-align:top;
  line-height:1em;
}
.bulle img{
  vertical-align:top;
  float:left;
  margin-right:0.25em;
}
/*-- L'info bulle --*/
#info_bulle {
  position:absolute;
  display:none;
  padding:0.5em;
  font-size:0.8em;
  border:1px solid #abc;
  background:#fff;
  min-width:25em;
  box-shadow:1px 1px 5px #888;
}
</style>
<script>
$(document).ready(function() {
  var $bulle = $('<div id="info_bulle"></div>');
  $('body').append( $bulle);
  $('#avatar li')
    .on( 'mouseenter', function (e){
        var $clone = $(this).children('.bulle').clone( true);
        $clone.css('display', 'block');
        $bulle
          .append( $clone)
          .css({
              'display': 'block',
              'left' : e.clientX +10,
              'top' : e.clientY +10
            })
      })
    .on('mouseleave', function(){
        $bulle
          .empty()
          .css({
              'display': 'none'
            });
      });
});
</script>
</head>
<body>
<div id="main">
  <h1>Info Bulle simple</h1>
  <div class="section">
    <h2>Quelques intervenants sur DVP</h2>
    <div id="data">
      <ul id="avatar">
        <li>Bovino<div class="bulle"><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif" alt="avatar">Bovino</div></li>
        <li>danielhagnoul<div class="bulle"><img src="http://www.developpez.net/forums/avatars/285162-danielhagnoul.gif" alt="avatar">danielhagnoul</div></li>
        <li>jreaux62<div class="bulle"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif" alt="avatar">jreaux62</div></li>
        <li>NoSmoking<div class="bulle"><img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt="avatar">NoSmoking</div></li>
        <li>sekaijin<div class="bulle"><img src="http://www.developpez.net/forums/avatars/42146-sekaijin.gif" alt="avatar">sekaijin</div></li>
        <li>SpaceFrog<div class="bulle"><img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif" alt="avatar">SpaceFrog</div></li>
        <li>SylvainPV<div class="bulle"><img src="http://www.developpez.net/forums/avatars/562435-sylvainpv.gif" alt="avatar">SylvainPV</div></li>
        <li>Vermine<div class="bulle"><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif" alt="avatar">Vermine</div></li>
        <li>Watilin<div class="bulle"><img src="http://www.developpez.net/forums/avatars/377824-watilin.gif" alt="avatar">Watilin</div></li>
      </ul>
    </div>
    <p>Toutes mes excuses à ceux que j'aurais oublié de lister.</p>
  </div>
</div>
</body>
</html>

le code "efficace"

Code javascript :

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
$(document).ready(function() {
  var $bulle = $('<div id="info_bulle"></div>');
  $('body').append( $bulle);
  $('#avatar li')
    .on( 'mouseenter', function (e){
        var $clone = $(this).children('.bulle').clone( true);
        $clone.css('display', 'block');
        $bulle
          .append( $clone)
          .css({
              'display': 'block',
              'left' : e.clientX +10,
              'top' : e.clientY +10
            })
      })
    .on('mouseleave', function(){
        $bulle
          .empty()
          .css({
              'display': 'none'
            });
      });
});

PS : je déplace vers le forum javascript car s'en est

Soucis avec une div(hover)

JavaScript

Discussions similaires

Partager

Partager