A centered background image appears in a text input area

Author：Eve Cole Update Time：2009-06-18 17:35:54

I saw the absolutely classic pulley news display effect created by CSS+JS. This special effect is a classic control of CSS+JS. In fact, it can be done with CSS alone. It is just for compatibility with that garbage IE, so it is not allowed to be a JS. The following If the js part of the code is removed, it will work normally in Opear and Firrfox, but not in IE.

Anyone who is interested can test it. I also hope to help those in need.

<!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=utf-8" /> <meta http-equiv=" Content-Language" content="zh-CN" /> <title>Css to create mouse trigger effect</title> <style type="text/css">  </style> <script type="text/javascript"> <![CDATA[//> < !-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("searchNav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot. childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className. replace(" over", ""); } } } } } window.onload=startList; //--><!]]> </script> </head> <body> <div class="kw_from"> <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> <ul id="searchNav"> <li id="conter1"> <h2>What are you looking for</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="#">Accounting</ a> </li> <li><a href="#">Web Design</a></li> <li><a href="#">Translation</a></li> <li> <a href="#">Tutor</a></li> <li><span class="moreCity"><a href="#">More>> </a></span> </li> </ul> </li> <li id="conter2"><h2>There</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <li><a href="#">Beijing</a> </li> <li><a href="#">Shanghai</a></li> <li>< a href="#">Guangzhou</a></li> <li><a href="#">Shenzhen</a></li> <li><a href="#">Nanjing</li> a></li> <li><a href="#">Tianjin</a></li> <li><a href="#">Hangzhou</a></li> <li>< a href="#">Chengdu</a></li> <li><a href="#">Chongqing</a></li> <li><a href="#">Wuhan</li> a></li> <li><a href="#">Xi'an</a></li> <li><a href="#">Shenyang</a></li> <li>< span class="moreCity"><a href="#">More City>></a></span></li> </ul> </li> </ul> <div class= "sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="Search Job" /> </div> <div class="searchMore "> <a href="search_expert.html">Advanced search</a><br /><a href="search_sort.html">Category search</a> </div> </form> </div> </body> </html>