CSS Hover Inspector

Inspect and edit CSS elements in the active tab

**CSS Hover Inspector: Real-time CSS Inspection and Editing** The **CSS Hover Inspector** is a powerful, lightweight extension designed for front-end developers and designers who want to skip the complexity of DevTools. Inspect and modify the CSS of any element on a page simply by hovering your mouse, all within a floating, professional-grade interface. **Key Features:** * **Instant Hover Inspection:** Automatically view the CSS rules applied to any element as you move your cursor over it. * **Click to Pin:** Lock the inspection on a specific element to focus on editing without losing your selection. * **Live CSS Editing:** Modify styles directly within the floating panel and see the changes applied to the page in real-time. * **Dracula Syntax Highlighting:** Experience a beautiful, color-coded interface for selectors, properties, and values. * **Smart CSS Filtering:** View only rules specific to the element (classes, IDs, and attributes) while excluding generic tags for faster debugging. * **One-Click Copy:** Use the floating button to copy individual properties or the entire CSS block to your clipboard. * **Draggable & Resizable:** Position and scale the inspection panel anywhere on your screen to fit your workflow. * **Multilingual Support:** Easily switch between English, Portuguese, and Spanish. **Why choose CSS Hover Inspector?** While standard DevTools are essential, they can often be cluttered and screen-consuming. This extension provides a **cleaner, faster alternative** by focusing on specific element rules and offering a "hover-first" workflow. It’s the perfect tool for quick style tweaks, design audits, and rapid prototyping. **How to Use:** 1. Click the extension icon and select **Activate**. 2. Hover over any element to see its CSS. 3. Click the element to pin the panel and start live editing. 4. Copy your modified code and apply it to your project.