Home >Web Front-end >HTML Tutorial >How to realize the function of web page pop-up interface_html/css_WEB-ITnose
How to realize the function of web page pop-up interface_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:241159browse
I just started learning web design recently and want to use dreamweaver cs5 to implement a function: when the mouse stops on the words "Home Page" "When ", a pop-up window with various categories, such as sweaters, T-shirts, etc., disappears after moving the mouse.
A friend from the meeting can help explain. I would like to thank you
Reply Discussion (Solution)
Use js to register mouse events, display the div layer when moving, and not display the div layer when moving out!
When the mouse moves into onmouseenter, a layer is displayed, and when the mouse moves out of onmouseleave, this layer is hidden.
There is no way to explain it further. It’s just like 1, 2, and 3 in a math problem. If you divide it further down, it becomes a decimal, which makes it even more troublesome.
The poster should find some information to learn. Not learning is not enough to discuss the Tao, and not learning is not enough to hear the Tao.
It is better to use JS. If you use the :hover attribute, IE6 does not support it.
Use JS.
<!doctype html><html><body><div id='box' onMouseover="showDiv(true)" onMouseout="showDiv(false)"><input type=button value="TEST" /></div><div id="hiddenBox" style="width:200px;height:200px;background:#ABC;display:none;"><p>This is the content.</p></div><script>var obj = document.getElementById("hiddenBox");function showDiv(b){if(true==b){//showobj.style.display="block"}else{obj.style.display="none"}}</script></body></html> Poster, follow your instructions I roughly wrote down the requirements. I wonder if the results you want are as follows:
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <script> window.onload = function(){ document.getElementById("test").onmouseover = function(){ document.getElementById("liebiao").style.display = "block"; } document.getElementById("test").onmouseout = function(){ document.getElementById("liebiao").style.display = "none"; } document.getElementById("liebiao").onmouseover = function(){ document.getElementById("liebiao").style.display = "block"; } document.getElementById("liebiao").onmouseout = function(){ document.getElementById("liebiao").style.display = "none"; } } </script> <style> .manContent{ position: absolute; top: 10px; left: 200px; width: 100px; padding: 5px; cursor: pointer; border: 1px solid red; text-align: center; } .manContent:hover{ background-color: #C0C0C0; } .funcContent{ position: absolute; top: 40px; left: 200px; width: 110px; display: none; border: 1px solid red; } ul{ margin: 0; padding: 0; } ul li{ list-style: none; padding: 4px; } ul li a{ text-decoration: none; color: #000; } ul li:hover{ background-color: blue; cursor: pointer; } </style> </head> <body> <div id="test" class="manContent" >首页</div> <div id="liebiao" class="funcContent" > <ul> <li><a href="#">针织衣</a></li> <li><a href="#">T恤</a></li> <li><a href="#">羊毛衫</a></li> </ul> </div> </body></html>