Próbuję wyświetlić popup Div OnMousehover na obrazie. Obecnie POP jest wyświetlany pod paskiem przewijania. Muszę wyświetlić ten pływający typ wyskakujący przez pasek przewijania DIV zamiast ukrywania pod paskiem przewijania.

Z góry dziękuję!

Przykładowy kod:

CSS

.popBox {
        margin: -50px 50px 0px 50px;
        z-index: 2;
        width: 60px;
        padding: 0.3em;
        border: 1px solid gray;
    }
.images {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
}
</style>

JavaScript

<script>
  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }
</script>

HTML

<body>

<div class="scroll" style="margin:0px auto">
 <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>

</div>

</body>
</html>
1
Deep 3015 18 sierpień 2014, 22:47

3 odpowiedzi

Najlepsza odpowiedź

Spróbuj dodawać pozycję: absolutny; do .popbox.

CSS

.popBox {
    margin: -50px 50px 0px 50px;
    z-index: 2;
    width: 60px;
    padding: 0.3em;
    border: 1px solid gray;
    position: absolute;
    }
.images {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
    }

JavaScript

  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }

HTML

<div class="scroll" style="margin:0px auto">
    <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>
</div>

PRÓBNY

1
Malcolm 18 sierpień 2014, 19:11

Próbowałem swojego kodu na skrzypce i nie działa dla mnie, więc trzeba się czegoś brakować, ale aby obsługiwać problemy CSS, musisz dodać pozycję do elementów z-index. Więc w twoim przypadku byłoby taki:

div.scroll {
background-color: #00FFFF;
width:180px;
height: 200px;
overflow: scroll;
position:relative;
z-index:-1
}

W ten sposób, że wyskakuje się nad przewijaniem.

Również, jak w tym mamy, wymień </br> przez <br/> lub po prostu dodaj .images{display:block}

0
Devin 18 sierpień 2014, 18:57

Będziesz musiał dołączyć węzły na zewnątrz elementu, który ma zastosować overflow: scroll. Przez jego naturę, overflow: scroll sprawi, że twoje popup będą potrzebować przewijania, aby zobaczyć.

Prawdopodobnie będziesz chciał dodać kolejny opakowanie div wokół elementu, i daj mu position: relative, dołącz swoje popup do tego nowego opakowania div i umieść je za pomocą position: absolute (position: relative na Nowy Wrapper Div sprawia, że absolutnie ustawione dzieci umieszczone absolutnie w stosunku do tego elementu.)

0
bronzehedwick 18 sierpień 2014, 19:04