MINI PROJECT 1 (Modul 5)

on
MINI PROJECT 5 MODUL 5




  • Mini Project 1
memanipulasi list dengan hover style

code nya sebagai berikut:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function changeColor1() {
            var li = document.getElementById('Listku');
            li.style.color = 'blue'
        }
        function changeColor2() {
            var li = document.getElementById('Listku');
            li.style.color = 'green'
        }
        function changeColor3() {
            var li = document.getElementById('Listku');
            li.style.color = 'yellow'
        }
        function changeHover1() {
            var li = document.getElementById('Listku');
            li.classList.add('hover-biru');
        }
        function changeHover2() {
            var li = document.getElementById('Listku');
            li.classList.add('hover-hijau');
        }
        function changeHover3() {
            var li = document.getElementById('Listku');
            li.classList.add('hover-kuning');
        }
    </script>
</head>
<style>
    .hover-biru:hover {
        color: blue;
    }
    .hover-hijau:hover {
        color: lime;
    }
    .hover-kuning:hover {
        color: yellow;
    }
</style>
<body>
    <div id="Listku">
    <li>panglima</li>
    <li>akbar</li>
    <li>abdillah</li>
    <li>muhammad</li>
    <li>jibril</li>
    <li>muqoddas</li>
    </div>

    <h3>Warna teks</h3>
    <button onclick="changeColor1()">biru</button>
    <button onclick="changeColor2()">hijau</button>
    <button onclick="changeColor3()">kuning</button>

    <h3>Warna hover</h3>
    <button onclick="changeHover1()">biru</button>
    <button onclick="changeHover2()">hijau</button>
    <button onclick="changeHover3()">kuning</button>
</body>
</html>


dan outputnya sebagai berikut: 



Comments

Post a Comment