menampilkan teks dengan event jquery bagian 2 dan contohnya

Jadi sebelumnya kita pernah membuat hal semacam ini ya, tetapi disini dengan cara berbeda, jika sebelumnya kita menggunakan event ketika di klik teks baru akan muncul, sekarang kita akan coba ketika mouse ini berada pada sebuah tombol saja, jadi tanpa perlu mengkilik teks sudah muncul ya, sperti itu kira-kira, oke tanpa berlama-lama sesaat lagi kita akan bahas menampilkan teks dengan event jquery bagian 2, simak terus ya teman-teman.

Seperti yang saya tulis pada paragraf pertama menampilkan teks dengan event jquery bagian 2, kita cuma menggantinya dengan even hover saja ko teman-teman, jadi tidak terlalu banyak berbeda ya, dan saya menggunakan method hide juga ya, dan event mouseout juga, jadi ketika crusor sudah tidak berada pada sebuah tombol, maka teks itu pun akan hilang semua, seperti itu, oke silahkan teman-teman perhatikan kode berikut ini:

<html>
  <head>
    <title>Menampilkan teks dengan event jquery bagian 2</title>   
	<style type="text/css">
      .button{
        width: 100px;
        float: left;
        text-align: center;
        color:#000;
        background-color:cyan;
        padding: 5px;
        margin: 5px;
        font-weight: bold;
	  }
    .container{
      width: 500px;
      margin: auto;
      border: 1px solid red;
      padding: 10px;
    }
    h1{
      text-align: center;
    }
    </style>
	
  </head>
  <body>
    <div class="container">
      <h1>Menampilkan teks dengan event jquery bagian 2</h1>
      <span class="button" id="id_html">HTML</span>
      <span class="button" id="id_css">CSS</span>
      <span class="button" id="id_php">PHP</span>
      <br>
      <br>

      <div class="HTML">
        <p>HTML Adalah = is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div class="CSS">
        <p>CSS Adalah = is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div class="PHP">
        <p>PHP Adalah = is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js">
      </script>
      <script type="text/javascript">
      $(document).ready(function(){
        $(".HTML").hide();
        $(".CSS").hide();
        $(".PHP").hide();

        $("#id_html").hover(function(){
          $(".HTML").show("slow");
          $(".CSS").hide();
          $(".PHP").hide();
        })
        $("#id_css").hover(function(){
          $(".HTML").hide();
          $(".CSS").show("slow");
          $(".PHP").hide();
        })
        $("#id_php").hover(function(){
          $(".HTML").hide();
          $(".CSS").hide();
          $(".PHP").show("slow");
        })
        $('.button').mouseout(function(){
          $(".HTML").hide();
          $(".CSS").hide();
          $(".PHP").hide();
        })
      })
    </script>
  </div>
  </body>
</html>

Mungkin untuk gambar sama seperti kemarin ya, tetapi tidak papa, saya akan coba menampilkanya kembali, seperti ini:

tombol panah menandakan saya sedang menghover bagian tombol css, seperti yang teman-teman lihat teks di bawahnya muncul ya, sewaktu saya menghover, dan saya rasa cukup sampai disini dulu belajar kita tentang menampilkan teks dengan event jquery bagian 2, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Menampilkan teks dengan event jquery bagian 2

Kategori