<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sàn Nhảy Sôi Động</h1>
<p>Di chuột vào các ô vuông để bật đèn!</p>
<div class="san-khau">
<div id="den-do" class="den">ĐỎ</div>
<div id="den-xanh" class="den">XANH</div>
<div id="den-vang" class="den">VÀNG</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #222; /* Nền tối như sàn nhảy */
color: white;
text-align: center;
font-family: sans-serif;
}
.san-khau {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 50px;
}
.den {
width: 150px;
height: 150px;
background-color: #555; /* Màu xám khi tắt */
border-radius: 50%; /* Hình tròn */
display: flex; /* Để căn giữa chữ */
align-items: center;
justify-content: center;
font-weight: bold;
transition: 0.3s; /* Hiệu ứng mượt mà */
border: 5px solid white;
}
// 1. Lấy các phần tử từ HTML
let denDo = document.getElementById("den-do");
let denXanh = document.getElementById("den-xanh");
let denVang = document.getElementById("den-vang");
// --- XỬ LÝ ĐÈN ĐỎ ---
// Khi chuột đi VÀO (mouseover)
denDo.addEventListener("mouseover", function() {
denDo.style.backgroundColor = "red";
denDo.style.boxShadow = "0 0 50px red"; // Hiệu ứng phát sáng
denDo.innerHTML = "BẬT!";
});
// Khi chuột đi RA (mouseout)
denDo.addEventListener("mouseout", function() {
denDo.style.backgroundColor = "#555"; // Về màu xám
denDo.style.boxShadow = "none";
denDo.innerHTML = "ĐỎ";
});
// --- XỬ LÝ ĐÈN XANH (Tương tự) ---
denXanh.addEventListener("mouseover", function() {
denXanh.style.backgroundColor = "#00ff00"; // Xanh lá dạ quang
denXanh.style.boxShadow = "0 0 50px #00ff00";
});
denXanh.addEventListener("mouseout", function() {
denXanh.style.backgroundColor = "#555";
denXanh.style.boxShadow = "none";
});
// --- XỬ LÝ ĐÈN VÀNG (Tương tự) ---
denVang.addEventListener("mouseover", function() {
denVang.style.backgroundColor = "yellow";
denVang.style.color = "black"; // Đổi màu chữ cho dễ đọc
denVang.style.boxShadow = "0 0 50px yellow";
});
denVang.addEventListener("mouseout", function() {
denVang.style.backgroundColor = "#555";
denVang.style.color = "white";
denVang.style.boxShadow = "none";
});