CSS enables the mouse to slide and display the Hidden Layer Effect

Source: Internet
Author: User

  Tutorial on helping customers (www.bkjia.com)Yesterday, a friend asked a small Editor of the Helper house a question about CSS, which was not very difficult. He did not reply to his work because he was too busy yesterday. He came early this morning, I chatted with MM about the business and the time was up. I had to deal with my friend's Affairs yesterday, so that this kid could not say that I was a friend of mine. Haha, the problem with theme is: how to use CSS to slide the mouse to display the hidden layer effect? Let's look at the instance Code directly below:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> Use CSS to implement layer-based mouse sliding and hide the effect-helper's house-Focus on webmasters and the internet! </Title> <meta name = "description" content = "is a global provider of Chinese Internet information and tutorials. It has been committed to providing impetus for Internet development for many years, liehuo is passionate, positive, upward, and progressive. the character advocated by Net! "/> <Meta name =" keywords "content =" website construction, webmaster, website construction information, Chinese webmaster, website construction, website development, webpage and plane design, web standards, personal websites, SEO, website promotion, HTML, CSS, xhtml, css, Dreamweaver, Fireworks, Flash, Asp, Php, Jsp, ASP. NET, iis, Apache, Photoshop, Access, MySQL, SQL server, javaScript "/> <meta http-equiv =" X-UA-Compatible "content =" IE = 7 "> <meta content =" Copyright 2009 bkjia.com "name =" copyright "/> <body> <table width = "200" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td bgcolor = "#99 FFFF" onmouseover = "document. all. layer1.style. visibility = 'visable' "onmouseout =" document. all. layer1.style. visibility = 'den den '"> display </td> <td bgcolor =" # 0066FF "onmouseover =" document. all. layer1.style. visibility = 'den den '"> hide </td> </tr> </table> <input type =" button "name =" button "id =" button "value =" button "onclick =" document. all. layer1.style. visibility = 'visable' "/> <p> </p> <div id =" Layer1 "style =" visibility: hidden; width: 400px; height: 300px; background-color: #99 CCFF; x "> </body> 

Tip: the code can be modified before running!

Well, I finally finished writing it. I wrote it by referring to a friend's example on the Internet. Let's take a look at it. If there is anything wrong, please feel free to give your comments. I will send it to my friends later.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.