jQuery / JS / 前端技術 / 筆記 · 2019-10-21

jQuery Hover效果

Hover opacity 透明度

<script type="text/javascript">
     $(function(){
          $('.pic').hover(function(){
               $(this).stop().animate({
                    opacity: .6
               });
          }, function(){
               $(this).stop().animate({
                    opacity: 1
               });
          });
     });
</script>
<a href="#"><img src="images/cases/pic_name.jpg" width="560" height="144" alt="" class="pic"/></a>

Onmousemove 換圖效果

<img src="images/top_menu_01.png" border="0" onmousemove="this.src='images/top_menu_01_over.png'" onmouseout="this.src='images/top_menu_01.png'"  width="100" height="40" />

Hover html中英文切換

<script>
     $(document).ready(function()
     {
          $('#btn_1').hover(function(){$('#btn_1').html('關於我們');}, function() {$('#btn_1').html('About US');});
 
     });
</script>
<li id="btn_1" onclick="window.location.href='company.php'">About Us</li>