如何将标签圈起来

不知如何写一个脚本，可以实现当鼠标移到某个标签上时（如input，a标签等等），将该标签给圈起来；当鼠标移出后，又恢复正常？

解决方案 »

  1.   

    控件的onmouseover和onmouseout属性中设置相应改变CSS的js代码就成了
      

  2.   

    <style>
    .hover{border:1px solid #FF0000;}
    .out{border:1px solid #000000;}
    </style>
    <input type="text" onmouseover="this.className='hover'" onmouseout="this.className='out'" class="out" /><a href="" onmouseover="this.className='hover'" onmouseout="this.className=''">魂牵梦萦博士</a>
      

  3.   

    <style>
    .hover{border:1px solid #FF0000;}
    .out{border:1px solid #000000;}
    </style>
    <input type="text" onmouseover="this.className='hover'" onmouseout="this.className='out'" class="out" /><a href="" onmouseover="this.className='hover'" onmouseout="this.className=''">魂牵梦萦博士</a>其中，链接也可以用CSS实现，这里就不多说明了
      

  4.   

    是不是这样呢？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    .cur01{background-color:#00CCFF; border:1px solid red; font-family:verdana; color:#FF3300; 
    font-size:15px; font-weight:bold; padding:2px;}
    .cur02{background-color:#FFFFFF; border:1px solid #cccccc; font-family:verdana; color:#FF3300; 
    font-size:15px; font-weight:bold; padding:2px;}
    </style>
    <body>
    <p>
    <input class="cur02" type="input" name="input01" value="Test" 
    onMouseOver="javascript:this.className='cur01';" onMouseOut="javascript:this.className='cur02';"> 
    <br>
    是不是这样呢？
    </p>
    </body>
    </html>
      

  5.   


    <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script> 
    <script> 
    var bw,bc,bs;
    window.onload=function(){
    $("body *").bind("mouseover",function(){
    bw = $(this).css("border-width");
    bc = $(this).css("border-color");
    bs = $(this).css("border-style");
    $(this).css("border","red 1px solid");
    return false;
    }).bind("mouseout",function(){
    $(this).css("border-style",bs).css("border-width",bw).css("border-color",bc);
    return false;
    })
    }
    </script>
    <img >
    <a>xxx<a>
    <div>
    asdasdadasd<br>
    asdasdasdad
    <div>xxxxxxx<br/></div>
    </div>
      

  6.   

    很简单，lz理解这个思路就不难了，你让鼠标经过控件时，让控件的边框粗细颜色属性变一变，离开后恢复即可。具体的用到了css+js，用那种样式 ，看自己的喜好，比方下面的 
    <style>
    .hover_state{border:2px solid #fff;}
    .out_state{border:1px solid #000;}
    </style>