[X(E)] HOVER

What is :hover?

In CSS, :hover is a pseudo-class used to select and style an element when the user designates it with a pointing device—most commonly by placing the mouse cursor over it, without necessarily clicking it.

It is widely used to create interactive feedback (such as changing button colors, underlining links, or highlighting table rows) to let the user know an element is clickable or interactive.

Complete Example

Below is a fully functional, modern HTML and CSS example that expands significantly on your sample. It demonstrates how to style a table row on hover, while also improving overall table aesthetics (such as alternating row colors, smooth transitions, and distinct header styles).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect Example</title>
    <style>
        /* General table styling for readability */
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        th,
        td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #4a4ae2;
            color: white;
        }

        /* Default background for standard rows */
        tr {
            background-color: #ffffff;
            /* Adds a smooth transition effect when the hover state triggers */
            transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
        }

        /* Enhanced hover effect based on your sample */
        tr:hover {
            background-color: #e0e0ff;
            /* Optional extra polish: changes cursor to pointer */
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h2>Interactive Table Example</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Role</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Jane Doe</td>
                <td>Developer</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>002</td>
                <td>John Smith</td>
                <td>Designer</td>
                <td>Away</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Alice Johnson</td>
                <td>Manager</td>
                <td>Active</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Key Enhancements Made:

  • transition Property: Added a smooth fade-in effect (0.2s ease-in-out) so the color change isn't abrupt.
  • cursor: pointer: Changes the cursor to a pointing hand when hovering over the row, signaling to the user that the row is interactive.
  • Complete Structure: Wrapped your snippet inside a working HTML template with CSS reset styling, clear typography, and a structured table layout.
Hover Effect Example

Interactive Table Example

ID Name Role Status
001 Jane Doe Developer Active
002 John Smith Designer Away
003 Alice Johnson Manager Active

Comments

Post a Comment

Popular posts from this blog

[MAIN PROGRAM] UNDONE HOUSEHOLD WORKs WEB-PROGRAM v2/MAIN

Waiting to test Firebase… Write Test Data Read Test Data Delete Tester Data Category Manager (CRUD) ADD NEW Category: Add Category Existing Categories Category Actions Create New Task Task Title: Category: ADD NEW: Create Task Task List Filter by Category: (All Categories) Task ID Title Category Overall Status Manage Phase Manager Category for this Task: ADD NEW: Save Category Phase Number: Phase Status: Phase Description: Add Phase Existing Phases: Phase Status Description Upload Spreadsheet → Import to Firebase Expected columns in sheet: Title , Phase Number , Phase Status , Description , and optional Category . Value na or not available ...
Read more

PENDING ITEMs [REVISION] v0

🔗 My Pending and Delayed POSTs SUMMARY Sort by Date Sort by Auto Title Sort by My Title Ascending Descending Insert URL: Your Own Title (Optional): ➕ ADD ENTRY 💾 SAVE EDIT DATE AUTO TITLE MY TITLE URL ACTIONS 📝 TO DO LIST SUMMARY  Sort by Date Sort by Header Sort by Detail Ascending Descending Header (Title): Detail: ➕ ADD ENTRY ...
Read more