Tips cepat: membuat click event dengan css

By Blok CC 20 Apr, 2020 Post a Comment

blokcc tip cepat hari ini, aku akan menunjukkan pada kalian teknik yang bagus: kita akan menggunakan simple csss untuk membuat click event. kuncinya adalah dengan menggunakan pseudo class :target.

Final Source

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title></title>

    <style>

       figure { background: #e3e3e3; display: block; float: left;}

       #zoom {

          width: 200px;

          -webkit-transition: width 1s;

          -moz-transition: width 1s;

          -o-transition: width 1s;

          transition: width 1s;

      }

     /* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

      #zoom:target {

         width: 400px;

      }

    </style>

</head>

<body>

   <h1> "Click" Effect with CSS </h1>

   <figure>

      <img id="zoom" src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" />

      <figcaption>

         <ul>

            <li>

               <a href="#zoom">Zoom In</a>

            </li>

            <li>

               <a href="#">Zoom Out</a>

            </li>

         </ul>

      </figcaption>

   </figure>

</body>

</html>

Kesimpulan

Jadi bagaimana menurut kalian? Cukup rapi, bukan? Sebagai catatan, dalam komentar, aku ingin tahu bagaimana pendapat kalian tentang penggunaan element figcaption untuk membuat tautan "Zoom" yang terkait dengan gambar itu. Apa menurut kalian apakah itu penggunaan element yang benar? Terima kasih atas perhatian kalian!

Tips cepat: membuat click event dengan css

Kesimpulan

No comments for "Tips cepat: membuat click event dengan css"

Post a Comment