PHPackages                             cristian100/mouseover\_detect - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. cristian100/mouseover\_detect

ActiveDrupal-library[Utility & Helpers](/categories/utility)

cristian100/mouseover\_detect
=============================

Detects if browser supports mouseover event.

1.0(6y ago)07.1k↓50%GPL-2.0JavaScript

Since May 27Pushed 6y ago1 watchersCompare

[ Source](https://github.com/cristian100/mouseover_detect)[ Packagist](https://packagist.org/packages/cristian100/mouseover_detect)[ Docs](http://d4all.mx/plugin/mouseover_detect)[ RSS](/packages/cristian100-mouseover-detect/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

mouseover\_detect
-----------------

[](#mouseover_detect)

This library detects if browser supports mouseover event.

For a long time had been assumed that all browser will have mouseover events, but with the not so late introduction to mobile devices and also computers with touchscreen this assumption causes undesired behaviors.

These are some of the issues you might experience:

- Mobile Devices
    - When styles are added for `:hover` on links, this causes on mobile that the first touch (click), won't fire the desired action, it will instead activate the hover state of the link, and a second click will be needed to get the desired click behavior, this is solved by removing the CSS style `:hover` from the link, therefore the first click will result in the real click behavior.
- Remove :hover only from Mobile Devices:
    - There are some libraries that try to detect if the browser is using a Mobile devices, either by measuring width of the browser or by inspecting on Javascript the navigator.userAgent value, the problem with this, is that this would't work with existing known mobile devices, but as soon as a new browser or mobile device were to be promoted, this approach wouldn't work, also, this doesn't take into consideration, that you might use a Mouse connected through bluetooth, in which case, you would trigger `mouseover` events.
- Rely on Width:
    - Similar to the above approach, this doesn't take into account that you can actually resize your desktop browser width, neither you would have a way to predict all mobile devices width's.

Solution
--------

[](#solution)

The approach we use is to actually detect mouseover event, as soon as the user moves the mouse, class `has-mouseover` will be added to `html` tag.

Now, instead of adding styles to links as this:

```
a:hover{
  text-decoration: underline;
}

```

You would do it as:

```
html.has-mouseover a:hover{
  text-decoration: underline;
}

```

With this approach you cover the following situations:

- If user has a mobile device, mouseover won't be triggered, therefore the `a:hover` rule won't be present, and the first click on the link will trigger the desired behavior.
- If user has a mouse connected to desktop computer, tablet, mobile, or any kind of device, has-mouseover will be added as soon as mouse is moved inside the website, therefore all `:hover` or rules that you prefix with `html.has-mouseover` will be present.

How to use
----------

[](#how-to-use)

1. Install this package through composer:

```
composer require cristian100/mouseover_detect

```

2. Load library file `/libraries/mouseover_detect/dist/mouseover_detect.min.js` into your tag.

Once this library is load, you will see has-mouseover class in the html tag, from here you can create `:hover` styles that depend on this class, so that it works only when mouseover has been detected.

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2539d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/52385759fec21ca7ad2bdd7925c393679585f2eb246899791989e5b6d6e8f5e3?d=identicon)[cristian100](/maintainers/cristian100)

---

Top Contributors

[![cristian100](https://avatars.githubusercontent.com/u/2380287?v=4)](https://github.com/cristian100 "cristian100 (3 commits)")

---

Tags

eventjavascriptjquerymobiledesktoptouchmouseover

### Embed Badge

![Health badge](/badges/cristian100-mouseover-detect/health.svg)

```
[![Health](https://phpackages.com/badges/cristian100-mouseover-detect/health.svg)](https://phpackages.com/packages/cristian100-mouseover-detect)
```

###  Alternatives

[jenssegers/agent

Desktop/mobile user agent parser with support for Laravel, based on Mobiledetect

4.8k67.8M440](/packages/jenssegers-agent)[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k480.4k3](/packages/snapappointments-bootstrap-select)[froala/wysiwyg-editor

A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.

5.4k306.9k3](/packages/froala-wysiwyg-editor)[kartik-v/yii2-widget-touchspin

A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle touchspines (sub repo split from yii2-widgets)

184.1M6](/packages/kartik-v-yii2-widget-touchspin)[fedemotta/yii2-widget-datatables

DataTables widget for Yii2

34179.4k1](/packages/fedemotta-yii2-widget-datatables)[edofre/yii2-fullcalendar

Yii2 widget for fullcalendar

2761.7k1](/packages/edofre-yii2-fullcalendar)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)