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
132
votes
27 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
  • 24,839
  • 29
  • 105
  • 152
127
votes
15 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
  • 71,795
  • 44
  • 182
  • 241
125
votes
15 answers

CSS disable hover effect

I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class. i am using the below CSS class when my button is disabled. now i want to remove the hover effect…
user2681868
  • 1,347
  • 3
  • 11
  • 8
122
votes
21 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
  • 94,807
  • 60
  • 220
  • 330
106
votes
6 answers

How to use chrome web inspector to view hover code

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other…
Bo.
  • 1,497
  • 3
  • 11
  • 21
98
votes
10 answers

div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what…
Ionuț G. Stan
  • 176,118
  • 18
  • 189
  • 202
97
votes
3 answers

How can I delay a :hover effect in CSS?

Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven't seen anything on delaying the :hover event. I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent…
Adam Youngers
  • 6,421
  • 7
  • 38
  • 50
96
votes
7 answers

How to change CSS property using JavaScript

I want to change a CSS property of a class using JavaScript. What I actually want is when a
is hovered, another
should become visible. .left, .right { margin: 10px; float: left; border: 1px solid red; height: 60px; width:…
Rohan Das
  • 1,137
  • 1
  • 8
  • 10
94
votes
7 answers

CSS: Hover one element, effect for multiple elements?

I'm looking for a method for my hovering issue.
Lorem Ipsum
Now, both classes, image and layer, have borders. Both have different color for…
Marko
  • 1,565
  • 2
  • 13
  • 20
94
votes
14 answers

image moves on hover - chrome opacity issue

There seems to be an issue with my page here: http://www.lonewulf.eu When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome. My css: .img{ -ms-filter:…
Tasos
  • 1,622
  • 4
  • 28
  • 47
87
votes
5 answers

How to make in CSS an overlay over an image?

I am trying to achieve something like this: When I hover over an image, I would like to put on that image this dark color with some text and the icon. I am stuck here. I found some tutorials but they didn't work out for this case. Also, another…
user984621
  • 46,344
  • 73
  • 224
  • 412
87
votes
10 answers

How to show text on image when hovering?

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image. I've tried a…
Will Ryan
  • 1,815
  • 4
  • 19
  • 21
84
votes
22 answers

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so…
user2704743
  • 1,223
  • 5
  • 15
  • 14
83
votes
2 answers

Using CSS to transition the fill property of an SVG path on hover

I'm including an SVG image file on my page within an object tag, like this: The image in question is a world map, i want to transition the fill…
David Alsbright
  • 1,526
  • 1
  • 17
  • 31
1
2
3
…
99 100