Wikipedia

Mouseover: Difference between revisions

Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
→External links: flash is deprecated and few people are bound to have it; it doesn't make sense to have this link anymore
No edit summary
Line 1:
{{short description|User interface element}}
In the field of [[computing]] and [[web design]], a mouseover, also called a hover effect, is a graphical control element. This element responds when a user moves their mouse pointer over a designated area. This area can be a button, image, or [[hyperlink]]. This simple action can trigger different responses. The element's color or appearance can change. Additional information or interactive content can be displayed. The mouseover effect is an essential part of user interaction. It adds layers of interactivity and responsiveness to websites and applications.<ref>[http://www.javascripter.net/faq/onmouseo.htm JavaScript OnMouseOver<!-- Bot generated title -->]</ref> <ref>[http://www.webdesignerwall.com/demo/advanced-css-menu/ Advanced CSS Menu | by Web Designer Wall<!-- Bot generated title -->]</ref>
{{update|reason=Dated information, mouseover events do a lot more these days.|date=December 2018}}
In [[computing]], a <abbr title="This is an example of a mouseover, done with '&lt;abbr title='.">'''mouseover'''</abbr>, <span title="This is another example of a mouseover, done with '&lt;span title='.">'''mouse hover'''</span> or '''hover box''' is a [[graphical control element]] that is activated when the [[User (computing)|user]] moves or hovers the [[Pointer (user interface)|pointer]] over a trigger area, usually with a [[Computer mouse|mouse]], but also possible with a [[digital pen]]. Mouseover control elements are common in [[Web browser|web browsers]]. For example, hovering over a [[hyperlink]] triggers the mouseover control element to display a [[URL]] on the [[status bar]]. Site designers can define their own mouseover events using [[JavaScript]]<ref>[http://www.javascripter.net/faq/onmouseo.htm JavaScript OnMouseOver<!-- Bot generated title -->]</ref> or [[Cascading Style Sheets]].<ref>[http://www.webdesignerwall.com/demo/advanced-css-menu/ Advanced CSS Menu | by Web Designer Wall<!-- Bot generated title -->]</ref>
 
A mouseover is essentially an event that occurs when a user hovers their mouse pointer over a specific area on a digital interface. The user doesn't need to click or do any other input. Just placing the pointer over the element is enough to trigger the effect. In technical terms, a mouseover is an event. Web developers can use this event to create dynamic, responsive web experiences. Using [[HTML]], [[CSS]], and [[JavaScript]], designers can define what happens when a user hovers over an element. This could be a visual change, displaying additional content, or even activating complex animations.<ref>{{Cite web |title=What is the difference between the mouseover and mouseenter events? |url=https://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events}}</ref>
Mouseover [[event (computing)|event]]s are frequently used in [[web design]] and [[graphical user interface]] programming.
 
== Importance in UI/UX design ==
It is also known as '''rollover''', which refers to a button created by a web developer or web designer, found within a [[web page]], used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself. The part of the term 'roll' is probably referring to older mice which had a mechanical assembly consisting of a hard rubber ball housed in the base of the mouse (which rolls) contrary to the modern optical mouse, which has no rolling parts.
Mouseover effects are important for improving [[user interface]] (UI) and [[user experience]] (UX) design. They provide immediate visual feedback to users, indicating that an element is interactive and can be engaged with. This feedback helps guide users through a [[website]] or application, letting them know which elements are clickable or interactive without having to click first. From a UX perspective, mouseover effects contribute to a more intuitive and engaging experience. They make interfaces feel more dynamic and responsive, which can lead to higher user satisfaction and better overall interaction with the site. For example, a button that changes color when hovered over feels more alive and interactive than a static one, encouraging users to click and explore further. Mouseover effects can also be used to reveal additional information without cluttering the interface. For instance, tooltips—small text boxes that appear when hovering over an element—can provide helpful hints, definitions, or additional context without taking up permanent space on the screen. This ability to present information on demand is especially valuable in complex interfaces, where screen real estate is limited.<ref>{{Cite web |title=How do users know to hover over elements? |url=https://ux.stackexchange.com/questions/82015/how-do-users-know-to-hover-over-elements}}</ref>
 
== Technical Implementation ==
Rollovers can be done by imagery, text or buttons. The user only requires two images/buttons (with the possible addition of "alt" text to these images) to perform this interactive action. Rollover imagery can be done either by a program with a built-in tool or script coding. The user will have to pick a first image and select an alternate secondary image. A mouse action will have to be set to either "click on" or "mouse over" in order for the rollover to be triggered. When the mouseover moves on the image, the alt image/secondary image will appear but will not stay – when the user "mouses out" by moving the mouse away from the image, the original source image will reappear.{{Fact|date=November 2007}}
 
=== TooltipHTML/CSS Mouseover ===
Mouseover effects are often used in web design. They are created using HTML and CSS. These technologies make it easy and efficient to make web elements more interactive and responsive. One of the key tools for creating mouseover effects in CSS is the <code>:hover</code> pseudo-class.
{{main article|Tooltip}}
A special usage of mouseover event is a [[tooltip]] which shows a short description of the object under the pointer. The tooltip appears only after the mouse or stylus is held over the object for a certain amount of time.
 
==== CSS Pseudo-Classes ====
On images, these may be produced using the [[HTML]] <code>title</code> attribute.<ref>{{cite web|title=A vocabulary and associated APIs for HTML and XHTML|url=http://www.w3.org/TR/html5/dom.html#the-title-attribute|access-date=16 February 2015}}</ref>
The :hover pseudo-class in CSS is a powerful tool. It allows developers to define the styles that should be applied to an element. The styles are applied when the user hovers their mouse pointer over the element. Unlike static CSS properties, the :hover pseudo-class targets an element only when a specific condition (hovering) is met. The styles are not applied at all times. The :hover pseudo-class can be applied to almost any HTML element. This includes text, images, buttons, and links. By using :hover, you can change the appearance of these elements dynamically. This creates a more engaging and interactive user experience. For example, you can use :hover to change the background color of a button. The change happens when a user hovers over the button. You can also add a shadow to an image when it's hovered over. The possibilities with :hover are vast, and the implementation is simple.<ref>{{Cite web |title=onmouseover (HTML element) |url=https://www.sitepoint.com/onmouseover-html-element/}}</ref>
 
==== Example Code ====
1. '''Changing Background Color on Hover:'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Background Color</title>
<style>
.hover-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
 
.hover-button:hover {
background-color: green;
}
</style>
</head>
<body>
<button class="hover-button">Hover Me</button>
</body>
</html>
 
</syntaxhighlight>2. '''Changing Text Color on Hover:'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Text Color</title>
<style>
.hover-text {
color: black;
font-size: 18px;
text-decoration: none;
transition: color 0.3s ease;
}
 
.hover-text:hover {
color: red;
}
</style>
</head>
<body>
<a href="#" class="hover-text">Hover over this text</a>
</body>
</html>
 
</syntaxhighlight>3. '''Adding Shadow on Hover'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Shadow</title>
<style>
.hover-box {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 50px;
transition: box-shadow 0.3s ease;
}
 
.hover-box:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="hover-box"></div>
</body>
</html>
 
== Examples ==
<syntaxhighlight lang="html">
<!-- Direct usage is not recommended. It does not conform with web standards. -->
<img id="myImage" src="/https/en.m.wikipedia.org/images/myImage.jpg" onMouseOver="alert('your message');">
</syntaxhighlight>
 
<syntaxhighlight lang="== JavaScript"> Mouseover ===
CSS is good for making simple and effective hover effects. JavaScript allows you to create more complex and dynamic behaviors when a user hovers over an element. With JavaScript, you can control exactly what happens when a mouseover event occurs. This includes displaying tooltips, changing content, or triggering animations and transitions that are beyond what CSS can do. This is done using event listeners, particularly <code>onmouseover</code> and <code>onmouseout</code>.
// JavaScript code without any framework
<ref>var myImg = document.getElementById('myImage');</ref>
function myMessage() {
alert('your message');
}
 
Event Listeners: <code>onmouseover</code> and <code>onmouseout</code>
if (myImg.addEventListener) { //addEventListener is the standard method to add events to objects.
myImg.addEventListener('mouseover', myMessage, false);
}
 
JavaScript event listeners help developers run code when specific events happen. The onmouseover event listener runs code when a user's mouse pointer enters an element. The onmouseout event listener runs code when the mouse pointer leaves that element. These events can be added to HTML elements to make very interactive web pages.
else if (myImg.attachEvent) { //For Internet Explorer
 
myImg.attachEvent('onmouseover', myMessage);
* '''<code>onmouseover</code>''': Triggers a function when the mouse pointer enters an element.
}
* '''<code>onmouseout</code>''': Triggers a function when the mouse pointer leaves an element.<ref>{{Cite web |title=Moving the mouse: mouseover/out, mouseenter/leave |url=https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave}}</ref>
 
==== Example Code ====
1. '''Displaying a Tooltip on Hover'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip on Hover</title>
<style>
.tooltip {
display: none;
position: absolute;
background-color: black;
color: white;
padding: 5px;
border-radius: 3px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="hover-element" style="display:inline-block; padding:10px; background-color:lightblue; cursor:pointer;">
Hover over me
</div>
<div id="tooltip" class="tooltip">This is a tooltip!</div>
 
<script>
const hoverElement = document.getElementById('hover-element');
const tooltip = document.getElementById('tooltip');
 
hoverElement.addEventListener('mouseover', function(event) {
tooltip.style.display = 'block';
tooltip.style.left = event.pageX + 10 + 'px';
tooltip.style.top = event.pageY + 10 + 'px';
});
 
hoverElement.addEventListener('mouseout', function() {
tooltip.style.display = 'none';
});
 
hoverElement.addEventListener('mousemove', function(event) {
tooltip.style.left = event.pageX + 10 + 'px';
tooltip.style.top = event.pageY + 10 + 'px';
});
</script>
</body>
</html>
 
</syntaxhighlight>2. '''Changing Content Dynamically on Hover'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Content Change</title>
<style>
#hover-box {
width: 300px;
height: 200px;
background-color: lightcoral;
text-align: center;
line-height: 200px;
font-size: 20px;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<div id="hover-box">Hover over me</div>
 
<script>
const hoverBox = document.getElementById('hover-box');
 
hoverBox.addEventListener('mouseover', function() {
hoverBox.style.backgroundColor = 'darkslateblue';
hoverBox.textContent = 'You are hovering!';
});
 
hoverBox.addEventListener('mouseout', function() {
hoverBox.style.backgroundColor = 'lightcoral';
hoverBox.textContent = 'Hover over me';
});
</script>
</body>
</html>
 
else { //For other browsers
myImg.onmouseover = myMessage;
}
</syntaxhighlight>
 
== Applications in Modern Web Design ==
<syntaxhighlight lang="Javascript">
Mouseover effects are important to modern web design. They improve interactivity and user engagement in different ways. These effects allow designers to provide more information, improve navigation, and create visually appealing experiences without overwhelming users. I will now examine some of the most common uses of mouseover effects in web design.
// jQuery example. It degrades well if JavaScript is disabled in the client browser.
 
$("img").mouseover(function(){
=== Tooltips ===
alert('your message');
[[Tooltip|Tooltips]] are small, informative pop-ups. They appear when a user hovers over an element. The elements can be icons, buttons, or text. The primary purpose of tooltips is to provide additional information or context. This helps avoid cluttering the interface. Tooltips are an excellent solution. They can deliver helpful hints, explanations, or details. These details might be too cumbersome to display directly on the page. For example, in a complex web application. It has numerous icons or buttons. Tooltips can explain the function of each element. This reduces the learning curve for new users. Tooltips only appear when needed. This keeps the interface clean and focused. Users can access extra information on demand. Tooltips are commonly found in forms. They can offer guidance on how to fill out specific fields. For instance, hovering over a question mark icon next to a form field. A tooltip could display an explanation. It could explain what information is required or provide an example of valid input.
});
 
'''Example''':
 
Tooltips provide additional information when users hover over elements. Here’s a simple example using HTML, CSS, and JavaScript.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
 
.tooltip .tooltip-text {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position the tooltip above the text */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
 
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
 
<div class="tooltip">Hover over me
<div class="tooltip-text">Tooltip text</div>
</div>
 
</body>
</html>
 
</syntaxhighlight>
 
=== Navigation Menus ===
Navigation menus are a crucial part of any website. They guide users to different sections or pages. Mouseover effects play an important role in enhancing the usability and functionality of navigation menus. This is particularly true for dropdown menus. A dropdown menu is a type of navigation menu. It reveals additional links or options when a user hovers over a main menu item. This allows users to explore subcategories or related pages without needing to click. This makes the navigation process smoother and more efficient. Mouseover effects in dropdown menus improve the overall user experience. They provide instant visual feedback. For example, when a user hovers over a menu item, the background color might change. Or an arrow might appear, indicating that more options are available. This makes it clear to the user that the item is interactive and will reveal further choices. Dropdown menus can be particularly useful on websites with a large amount of content. This includes e-commerce sites, where organizing products into categories and subcategories is essential for easy navigation.
 
'''Example''':
 
Dropdown navigation menus are a common use of mouseover effects. Here’s an example:<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu Example</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
 
li {
float: left;
}
 
li a, .dropdown-btn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropdown-btn {
background-color: #111;
}
 
li.dropdown {
display: inline-block;
}
 
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
 
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
 
.dropdown-content a:hover {
background-color: #f1f1f1;
}
 
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
 
<ul>
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-btn">Dropdown</a>
<div class="dropdown-content">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
</div>
</li>
</ul>
 
</body>
</html>
 
</syntaxhighlight>
 
=== Image Galleries ===
Image galleries are a popular feature on many websites. They are often used in portfolios, e-commerce sites, and photography blogs. Mouseover effects can improve the user experience in image galleries. These effects add interactive elements. They engage users and encourage them to explore more content. One common use of mouseover in image galleries is the zoom effect. When a user hovers over a thumbnail or image, the image might zoom in slightly. This gives the user a closer look at the details. This effect can be particularly useful in product galleries. Users want to inspect the quality or features of an item before making a purchase. Another use of mouseover in image galleries is to display additional information or previews. For example, hovering over an image could reveal the image's title, description, or even a short animation. This can make the gallery more informative and interactive. It offers users a richer experience. Mouseover effects can also be used to create slideshow-like transitions. Hovering over an image can change it to another version or angle. This gives users a dynamic view of the content without requiring clicks.
 
'''Example''':
 
Mouseover effects can enhance image galleries, for example, by zooming in on an image when hovered.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery Zoom Example</title>
<style>
.gallery {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
 
.gallery img {
width: 300px;
height: 200px;
transition: transform 0.3s ease;
}
 
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
 
<div class="gallery">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 1">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 2">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 3">
</div>
 
</body>
</html>
 
</syntaxhighlight>
 
=== Interactive Buttons ===
Buttons are essential in web design. They allow users to take actions like submitting forms, making purchases, or navigating to different pages. Using mouseover effects on buttons can make them more interactive and responsive. This enhances the overall user experience. When a user hovers over a button, the button's appearance changes. For example, the color may change, a shadow may be added, or the button may become slightly larger. This visual feedback tells the user that the button is active and ready to be clicked. This feedback is crucial for usability. It shows users which elements are interactive and encourages them to engage with the buttons. Buttons with mouseover effects also add sophistication to the design. For instance, a subtle animation that makes the button "lift" or "glow" when hovered over can make the website feel more dynamic and polished. Beyond visual effects, buttons can trigger other actions on hover. These actions can include displaying a tooltip with additional information, revealing hidden content, or playing a short animation or sound effect. These enhancements can make the interactions more enjoyable and intuitive.
 
'''Example''': Mouseover effects can make buttons more interactive by changing their appearance dynamically.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Button Example</title>
<style>
.interactive-button {
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition: background-color 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
 
.interactive-button:hover {
background-color: #005f73;
transform: translateY(-3px);
}
</style>
</head>
<body>
 
<button class="interactive-button">Hover Over Me</button>
 
</body>
</html>
 
</syntaxhighlight><ref>{{Cite web |title=onmouseover Event |url=https://www.w3schools.com/jsref/event_onmouseover.asp}}</ref>
 
 
== References ==
<references />
{{reflist}}
 
== External links ==
Retrieved from "https://en.wikipedia.org/wiki/Mouseover"