HTML5图片的hover事件案例

最新推荐文章于 2025-06-01 09:59:50 发布

原创最新推荐文章于 2025-06-01 09:59:50 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用CSS实现背景图片覆盖、元素缩放及旋转动画的方法，并通过JavaScript增强页面交互体验，如图片悬停放大、动画播放控制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style>

   body{
    background: url(../img/bb.jpg);

    /*背景图片足够大*/
    background-size: cover;
   }

   .img1{
    width: 400px;
    height: 260px;
    margin-top: 200px;
   }

   .img2 {
   width: 75px;
   height: 75px;
   position: relative;
   top: -80px;
   right: -300px;
  }

  /*小图标鼠标移上去时缩放原来的1.2倍*/
  .img2:hover{
   transform: scale(1.2);
  }


   .input1{    /*设置输入框的大小*/
    width: 1000px;
    height: 80px;
    font-size: 65px;
   }
   .input1:hover{ /* //当鼠标移上去时要做的事情*/
    transform: scale(1.5);
   }

   .input2{
    width: 300px;
    height: 80px;
    font-size: 65px;
    background-color: blue;
   }

   /*百度一下鼠标移上去时缩放原来的2倍.字变成红色*/
   .input2:hover{
    transform: scale(2);
    color: red;

   }


   .asd{

    animation: name1 2s linear;
   }

   @-webkit-keyframes name1{
    10% {
    transform: rotate(36deg);
   }
   20% {
    transform: rotate(72deg);
   }
   30% {
    transform: rotate(108deg);
   }
   40% {
    transform: rotate(144deg);
   }
   50% {
    transform: rotate(180deg);
   }
   60% {
    transform: rotate(216deg);
   }
   70% {
    transform: rotate(252deg);
   }
   80% {
    transform: rotate(288deg);
   }
   90% {
    transform: rotate(324deg);
   }
   100% {
    transform: rotate(360deg);
    }
   }

   #j2:hover{
    transition: all 2s;
    transform: rotate(45deg);
   }



  </style>
</head>
<body>

  <center>
   <img src="../img/baidu.png" class="img1"/>

   <table border="0" cellspacing="0">
    <tr>
     <td><input type="text" class="input1" placeholder="请您输入"></td>
     <td><input type="button" class="input2" value="百度一下"></td>
    </tr>


   </table>

   <img src="../img/small.png" class="img2"/>


   <table>
    <tr>
     <td><img src="../img/a3.jpg" id="j1" onmouseover="start()" onmouseout="stop()"></td>
     <td><img src="../img/a4.jpg" id="j2"></td>
     <td><img src="../img/a5.jpg" id="j3"></td>
     <td><img src="../img/a6.jpg" id="j4"></td>
     <td><img src="../img/a7.jpg" id="j5"></td>

    </tr>


    <tr>
     <td><img src="../img/a8.jpg" id="j6" onmouseover="start1()" onmouseout="stop()"></td>
     <td><img src="../img/a9.jpg" id="j7"></td>
     <td><img src="../img/a10.jpg" id="j8"></td>
     <td><img src="../img/a11.jpg" id="j9"></td>
     <td><img src="../img/a12.jpg" id="j10"></td>

    </tr>

   </table>

  </center>

  <script>

   function start(){

    var j1 = document.getElementById("j1");
    var j2 = document.getElementById("j2");
    var j3 = document.getElementById("j3");
    var j4 = document.getElementById("j4");
    var j5 = document.getElementById("j5");

    j1.setAttribute('class', 'asd');
    j2.setAttribute('class', 'asd');
    j3.setAttribute('class', 'asd');
    j4.setAttribute('class', 'asd');
    j5.setAttribute('class', 'asd');
   }


   function stop(){
    history.go(0);
   }

   function start1(){

    var j6 = document.getElementById("j6");
    var j7 = document.getElementById("j7")
    var j8 = document.getElementById("j8")
    var j9 = document.getElementById("j9")
    var j10 = document.getElementById("j10");

    j6.setAttribute("class","asd1")
    j7.setAttribute("class","asd1")
    j8.setAttribute("class","asd1")
    j9.setAttribute("class","asd1")
    j10.setAttribute("class","asd1")
   }



  </script>

</body>
</html>