Stack Overflow
Stack Overflow

Questions tagged [hover]

Hover refers to the action of placing the mouse cursor over a given element. Hover can also refer to an event in which a user on a touch-enabled device touches a given element.

Hover (sometimes referred to as ) is an event in which the user places the mouse cursor over any given element in a graphical user interface. Hover can also refer to an event in which a user on a touch-enabled device touches a given element.

In most cases, when hovering an item such as, for example, an , the cursor will change from default to pointer (small hand with index pointing) to indicate to the user that the item is clickable.

10690 questions
2331
votes
27 answers

How to change the cursor into a hand when a user hovers over a list item?

I've got a list, and I have a click handler for its items:
  • foo
  • goo
How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer…
user246114
  • 50,223
  • 42
  • 112
  • 149
703
votes
9 answers

How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container,…
Trufa
  • 39,971
  • 43
  • 126
  • 190
316
votes
5 answers

Add hover text without javascript like we hover on a user's reputation

In stackoverflow, when we hover on a user's reputation we see a text. I have seen this at many places and the source code tells me that it can be done without js. And i tried and got only this- hover me
Ash
  • 3,431
  • 2
  • 15
  • 15
281
votes
30 answers

Inline elements shifting when made bold on hover

I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference. I…
Billy
  • 15,516
  • 28
  • 70
  • 101
249
votes
18 answers

How to remove/ignore :hover css style on touch devices

I want to ignore all :hover CSS declarations if a user visits our website via touch device. Because the :hover CSS does not make sense, and it can even be disturbing if a tablet triggers it on click/tap because then it might stick until the element…
Simon Ferndriger
  • 4,455
  • 6
  • 28
  • 53
244
votes
10 answers

Angular 2 Hover event

In the new Angular2 framework, does anyone know the proper way to do a hover like an event? In Angular1 there was ng-Mouseover, but that doesn't seem to have been carried over. I've looked through the docs and haven't found anything.
Ronin
  • 2,867
  • 3
  • 14
  • 14
208
votes
30 answers

How to prevent sticky hover effects for buttons on touch devices

I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don't want…
Chris
  • 2,253
  • 3
  • 16
  • 10
185
votes
12 answers

"Inspect" a hover element?

Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears. I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar,…
OJFord
  • 10,522
  • 8
  • 64
  • 98
183
votes
29 answers

Inspect hovered element in Chrome?

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover,…
Skitterm
  • 4,257
  • 7
  • 38
  • 54
177
votes
15 answers

Mouseover or hover vue.js

I would like to show a div when hovering over an element in vue.js. But I can't seem to get it working. It looks like there is no event for hover or mouseover in vue.js. Is this really true? Would it be possible to combine jquery hover and vue…
Anders Andersen
  • 2,377
  • 2
  • 17
  • 25
172
votes
8 answers

How can I access a hover state in reactjs?

I have a sidenav with a bunch of basketball teams. So I would like to display something different for each team when one of them is being hovered over. Also, I am using Reactjs so if I could have a variable that I could pass to another component…
Username
  • 1,950
  • 2
  • 12
  • 21
171
votes
14 answers

CSS transition effect makes image blurry / moves image 1px, in Chrome?

I have some CSS that on hover, a CSS transition effect will moves a div. The problem, as you can see in the example, is that the translate transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly…
Lewis
  • 1,725
  • 2
  • 11
  • 7
169
votes
13 answers

What is the opposite of :hover (on mouse leave)?

Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave? Example: I have a HTML menu using list items. When I hover one of the items, there is a CSS color…
Cthulhu
  • 5,095
  • 7
  • 46
  • 58
137
votes
4 answers

Fade Effect on Link Hover?

on many sites, such as http://www.clearleft.com, you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action. I assume JavaScript is used to create this effect,…
Miles Henrichs
  • 2,300
  • 3
  • 20
  • 23
136
votes
4 answers

Is there an opposite CSS pseudo-class to :hover?

Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover.
RockPaperLz- Mask it or Casket
  • 5,361
  • 10
  • 45
  • 69
1
2 3
…
99 100