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.

9811 questions
892
votes
12 answers

See :hover state in Chrome Developer Tools

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. Am I missing something?
Ben
  • 11,249
  • 5
  • 15
  • 12
551
votes
6 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
  • 35,711
  • 41
  • 118
  • 180
288
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,153
  • 2
  • 12
  • 15
230
votes
26 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
  • 14,356
  • 28
  • 67
  • 99
215
votes
9 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,527
  • 2
  • 11
  • 13
179
votes
15 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
  • 3,580
  • 6
  • 23
  • 47
161
votes
28 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
  • 1,763
  • 3
  • 13
  • 9
161
votes
13 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,625
  • 2
  • 11
  • 7
136
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,172
  • 3
  • 18
  • 21
130
votes
26 answers

iPad/iPhone hover problem causes the user to double click a link

I have some websites I built times ago, that use jquery mouse events...I just got an ipad and i noticed that all the mouse over events are translated in clicks...so for instance i have to do two clicks instead of one..(the first hover, than the…
Francesco
  • 23,000
  • 25
  • 96
  • 139
126
votes
11 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
  • 4,449
  • 7
  • 42
  • 54
123
votes
24 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
  • 3,548
  • 7
  • 33
  • 52
122
votes
14 answers

How do I simulate a hover with a touch in touch enabled browsers?

With some HTML like this:

Some Text

Then some CSS like this: p { color:black; } p:hover { color:red; } How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can't think of an…
Rich Bradshaw
  • 67,265
  • 44
  • 170
  • 236
116
votes
4 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,380
  • 2
  • 9
  • 19
115
votes
19 answers

Disable hover effects on mobile browsers

I'm writing a Web site that's meant to be used from both desktops and tablets. When it's being visited from a desktop, I want the clickable areas of the screen to light up with :hover effects (different background color, etc.) With a tablet, there's…
Joe White
  • 87,312
  • 52
  • 206
  • 320
1
2 3
…
99 100