Cara Memberikan Warna Background di Teks Saat cursor diatas Tombol

Sebelumnya kita pernah membahas tentang yang hampir mirip dengan artikel kali ini yaitu memberikan background dengan jquery, sebenarnya hampir sama ya teman-teman, tetapi disini saya akan memberi tau saja, jadi ada cara lain untuk memberikan warna pada sebuah konten, jadi disini saya akan mencoba cara memberikan warna background di teks saat cursor diatas tombol, jadi jangan kemana-mana simak terus ya teman-teman.

Oke cara memberikan warna background di teks saat cursor diatas tombol, seperti saya tulis di atas, jadi kita bisa menimbulkan sebuah efek pada konten contohnya seperti pada artikel kali ini yaitu sebuah warna background pada teks, jadi tidak hanya ketika mouse di atas teks tersebut warna backround teksnya berubah, tetapi kita bisa memberikan di tombol, di manapun asal menggunakan metode event jquery, dan masih di layar web browser ya tentunya, oke langsung saja teman-teman perhatikan struktur HTML berikut ini:

<html>
  <head>
    <title>Cara Memberikan Warna Background Pada Teks Saat cursor diatas Tombol</title>
    </script>
	<style type="text/css">
      .hover{
        width: 150px;
        float: left;
        text-align: center;
        margin: 5px;
        border: 2px solid;
        font-weight: bold;
      }
      .container{
        margin: auto;
        width: 500px;
        border: 1px solid #666;
        padding: 10px;
      }
      h2{
        text-align: center;
        border-bottom:2px dotted;
        padding-bottom:  5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Cara Memberikan Warna Background Pada Teks Saat cursor diatas Tombol</h2>
      <span class="hover">Hover</span><br/><br/>
      <p>Lorem Ipsum 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. </p>
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
          $('.hover').mouseover(function(){
            $('p').css({
              'background-color':'cyan',
              'font-weight':'bold',
              'color':'blue'
            });
          });
          $('.hover').mouseout(function(){
            $('p').css({
              'background-color':'#fff',
              'font-weight':'normal',
              'color':'#000'
            });
          });
        });
      </script>
    </div>
  </body>
</html>

disini saya langsung saja memberikan strukutur HTML, CSS, dan jquerynya, teman-teman bisa di coba-coba kode jquerynya, supaya lebih paham, oke bagaimana hasilnya seperti ini ya:

Hasil gambar di atas adalah hasil ketika mouse di atas tombol ya, oke saya rasa cukup samapi disini dulu belajar kita tentang cara memberikan warna background di teks saat cursor diatas tombol, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.