3つのボタンhoverの方法

12337 ワード

hover

ボタンにhoverを付けると、いろいろな方法がありますが、試してみると3種類、テストしてみるとOKで、ここに残してメモを取ります.

1.

　　obj.style.backgroundImage="url(btnSmall.gif)";

2. CSS

　　obj.style.cssText= "background:url('btnSmallHover.gif')";

3.jquery hover

　　jquery.hover(function(){},function(){});

：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script> <script>
// 
function m(obj,type)
{
    switch(type)
    {   case 'out':
            obj.style.backgroundImage="url(btnSmall.gif)";
            break;
        case 'over':
            obj.style.backgroundImage="url(btnSmallHover.gif)";
            break;
    }
}
// cssText
function   mCss(obj,type){ 
    switch(type)
    {
      case 'out':
            obj.style.cssText= "background:url('btnSmall.gif')"; 
            break;
      case 'over':
            obj.style.cssText= "background:url('btnSmallHover.gif')"; 
            break;
    }
}
// jquery
$(function(){
    $('#c').hover(     
                    function(){ $(this).addClass("hover");},
                    function(){ $(this).removeClass("hover");}
                 );
})

</script>

<style>
button{border:0;width:82;height:40;background: url("btnSmall.gif");}

.hover{background:url( 'btnSmallHover.gif');}
</style>
</head>
<body>
<button onmouseover="m(this,'over');" onmouseout="m(this,'out');"> 1</button>
<button onmouseover="mCss(this,'over');" onmouseout="mCss(this,'out');"> 2</button>
<button id="c"> 3</button>
</body>
</html>

ジッタとスロットル

世界を探る