Soucis avec une div(hover)

1 pièce(s) jointe(s)

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

Pièce jointe 191789

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:

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:

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:

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

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.

ok et tu fais cela comment ???

je suis larguer la

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

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:

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:

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:

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:

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 ;)