Uma imagem de fundo centralizada aparece em uma área de entrada de texto

Autor：Eve Cole Data da Última Atualização：2009-06-18 17:35:54

Eu vi o efeito de exibição de notícias de polia absolutamente clássico criado por CSS + JS. Este efeito especial é um controle clássico de CSS + JS. Na verdade, pode ser feito apenas com CSS. não é permitido ser um JS. O seguinte Se a parte js do código for removida, ele funcionará normalmente no Opear e no Firrfox, mas não no IE.

Quem estiver interessado pode testá-lo. Espero também ajudar quem precisa.

<!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 para criar efeito de gatilho do mouse</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; cor: #000; tamanho da fonte: 12px; altura da linha: 160%; alinhamento do texto: esquerda; família da fonte: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande ' ,'Lucida Sans Unicode'; } *{ padding:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{ tamanho da fonte: 14px; : #000000 } .kw_from { preenchimento:20px 0 0 0px; margem: automático; preenchimento: 16px 0 0; 0; } .kw_from .searchMore{ float:esquerda;preenchimento: 4px; ; } #searchNav #conter2, #searchNav #conter4{ float:left; largura:180px; searchNav li ul { display: nenhum topo: 20px } #searchNav li:hover ul, #searchNav li.over ul { display: block float:left; fonte -size:12px; preenchimento:3px; decoração de texto: nenhum; #777; #searchNav ul li a:hover{ cor de fundo:#f4f4f4; ; } #searchNav #cityKw{ largura:130px; altura:18px; < !-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("searchNav"); .childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; .replace(" over", ""); } } } } } window.onload=startList; > <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> <ul id="searchNav"> <li id="conter1" > <h2>O que você está procurando</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="#" >Contabilidade</ a> </li> <li><a href="#">Web Design</a></li> <li><a href="#">Tradução</a></li > <li> <a href="#">Tutor</a></li> <li><span class="moreCity"><a href="#">Mais>> span> </li> </ul> </li> <li id="conter2"><h2>Lá</h2> <input id="cityKw" name="cityKw" type="text" /> < ul id="conter4"> <li><a href="#">Pequim</a> </li> <li><a href="#">Xangai</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="#">Mais cidades>></a></span></li> </ul> </li> </ul > <div class= "sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="Pesquisar trabalho" /> </div> < div class="searchMore "> <a href="search_expert.html">Pesquisa avançada</a><br /><a href="search_sort.html">Pesquisa por categoria</a> </div> </form > </div> </body> </html>