JavaScript onmouseover Event - Lesson 17

17.1 Understanding onmouseover Event

The onmouseover event occurs when the mouse pointer moves over an element. This event is commonly used to create interactive effects like tooltips, image enlargements, and hover animations.

Key points: The onmouseover event triggers when the mouse enters the element's boundary. It's often paired with onmouseout to handle when the mouse leaves the element.

Mouse Enters Element

onmouseover Triggers

Mouse Leaves Element

onmouseout Triggers

17.1.1 Basic onmouseover Example

Example 17.1: Hover Effect on Button

This example shows how onmouseover and onmouseout can change a button's appearance.

// JavaScript functions
function hoverEffect(element) {
    element.style.backgroundColor = "#4CAF50";
    element.style.color = "white";
    element.innerHTML = "Mouse Over Me!";
}

function resetEffect(element) {
    element.style.backgroundColor = "";
    element.style.color = "";
    element.innerHTML = "Hover Over Me";
}

// HTML
<button onmouseover="hoverEffect(this)" 
        onmouseout="resetEffect(this)">
    Hover Over Me
</button>

17.1.2 Image Hover Effect

Example 17.2: Image Zoom on Hover

This example uses onmouseover to enlarge an image when hovered over.

// JavaScript functions
function enlargeImage(element) {
    element.style.transform = "scale(1.1)";
    element.style.transition = "transform 0.3s";
}

function resetImage(element) {
    element.style.transform = "scale(1)";
}

// HTML
<img src="image.jpg" 
     onmouseover="enlargeImage(this)" 
     onmouseout="resetImage(this)" 
     style="width: 300px; transition: transform 0.3s;">

Hover over the image to see the effect

17.2 Interactive Card Hover Effects

Create modern UI elements with hover effects using onmouseover and onmouseout.

17.2.1 Card Flip on Hover

Example 17.3: Interactive Profile Card

This example creates a card that flips to reveal more information on hover.

// JavaScript functions
function flipCard(card) {
    card.querySelector('.card-front').style.transform = "rotateY(180deg)";
    card.querySelector('.card-back').style.transform = "rotateY(0deg)";
}

function unflipCard(card) {
    card.querySelector('.card-front').style.transform = "rotateY(0deg)";
    card.querySelector('.card-back').style.transform = "rotateY(180deg)";
}

// HTML
<div class="flip-card" 
     onmouseover="flipCard(this)" 
     onmouseout="unflipCard(this)">
    <div class="card-front">
        <!-- Front content -->
    </div>
    <div class="card-back">
        <!-- Back content -->
    </div>
</div>

John Doe

Frontend Developer

Contact Info

Email: [email protected]

Phone: (123) 456-7890

Hover over the card to flip it

17.2.2 Interactive Grid of Cards

Example 17.4: Service Cards with Hover Effects

This example shows a grid of service cards that animate on hover.

// JavaScript functions
function highlightCard(element) {
    element.style.transform = "translateY(-10px)";
    element.style.boxShadow = "0 15px 30px rgba(0,0,0,0.15)";
}

function unhighlightCard(element) {
    element.style.transform = "translateY(0)";
    element.style.boxShadow = "0 5px 15px rgba(0,0,0,0.1)";
}

// HTML
<div class="hover-grid">
    <div class="hover-card" 
         onmouseover="highlightCard(this)" 
         onmouseout="unhighlightCard(this)">
        <!-- Card content -->
    </div>
    <!-- More cards -->
</div>

Hover over each card to see the effect

17.3 Real-World Applications

These mouse events are essential in many web applications. Here are practical examples:

17.3.1 Image Gallery with Preview

Example 17.5: Hover Preview Gallery

This example shows an image gallery that displays a preview when hovering over thumbnails.

// JavaScript function
function showPreview(imageSrc) {
    document.getElementById("previewImage").src = imageSrc;
    document.getElementById("previewContainer").style.display = "block";
}

function hidePreview() {
    document.getElementById("previewContainer").style.display = "none";
}

// HTML
<div class="gallery">
    <img src="thumb1.jpg" onmouseover="showPreview('full1.jpg')">
    <img src="thumb2.jpg" onmouseover="showPreview('full2.jpg')">
    <img src="thumb3.jpg" onmouseover="showPreview('full3.jpg')">
</div>
<div id="previewContainer" onmouseout="hidePreview()">
    <img id="previewImage" src="full1.jpg">
</div>

Hover over thumbnails to see previews

17.3.2 Interactive Tooltip System

Example 17.6: Custom Tooltips on Hover

This example demonstrates a custom tooltip that appears when hovering over elements.

// JavaScript functions
function showTooltip(element, text) {
    const tooltip = document.getElementById("customTooltip");
    tooltip.innerHTML = text;
    tooltip.style.display = "block";
    
    const rect = element.getBoundingClientRect();
    tooltip.style.left = (rect.left + window.scrollX) + "px";
    tooltip.style.top = (rect.top + window.scrollY - 40) + "px";
}

function hideTooltip() {
    document.getElementById("customTooltip").style.display = "none";
}

// HTML
<button onmouseover="showTooltip(this, 'This button saves your changes')" 
        onmouseout="hideTooltip()">
    Save
</button>
<div id="customTooltip"></div>

Hover over buttons to see tooltips

❮ Previous Lesson Next Lesson: onsubmit ❯

Lesson 17: onmouseover Event