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
80
votes
6 answers

pure javascript to check if something has hover (without setting on mouseover/out)

I have seen this jQuery syntax: if($(element).is(':hover')) { do something} Since I am not using jQuery, I am looking for the best way to do this in pure javascript. I know I could keep a global variable and set/unset it using mouseover and…
mulllhausen
  • 4,225
  • 7
  • 49
  • 71
79
votes
7 answers

Set a:hover based on class

I have the following HTML: In CSS, I want to set…
anon355079
74
votes
11 answers

Does css hover work on mobile devices?

Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.
Sam
  • 1,045
  • 2
  • 9
  • 8
73
votes
14 answers

CSS hover border makes elements adjust slightly

I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is…
user1082764
  • 1,973
  • 9
  • 26
  • 40
73
votes
5 answers

Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code : img { border-radius: 50%; }
user3597950
  • 9,201
  • 6
  • 26
  • 35
73
votes
14 answers

css: avoid image hover first time blinking

I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image. When hovered, it has a.class-btn:hover { background-image('path/to/image-hovered.jpg'); } When the page loads the first…
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
73
votes
15 answers

How to debug CSS/Javascript hover issues

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector. Normally, I'd use Firebug to inspect the element that's…
Jason C
  • 21,377
  • 10
  • 38
  • 33
72
votes
4 answers

div hover background-color change?

How can I make it act as if a line of div is anchor so when I hover on it it returns to red CSS .e { width:90px; border-right:1px solid #222; text-align:center; float:left; padding-left:2px; cursor:pointer; } .f .e { …
Codette
  • 1,007
  • 2
  • 9
  • 18
72
votes
5 answers

Can you make hovered state in Firebug "sticky?"

When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug? Example; I hover over a nav bar and want to copy the selector…
Kyle
  • 65,599
  • 28
  • 144
  • 152
71
votes
1 answer

Bootstrap table row hover

How do I make the background change of a table row in Bootstrap 3 on hover. The table class I am using right now is table table-striped. I tried to add a extra class to the tags within the table and made the css like this…
user6827
  • 1,576
  • 5
  • 19
  • 25
71
votes
4 answers

How can I add new line/linebreak character in title attribute in HTML

I am using this Click here When someone hover over it I see all the text in one line. Is there any way to show it on new line?
user26
  • 3,937
  • 5
  • 22
  • 22
65
votes
4 answers

Using JQuery hover with HTML image map

I have a complicated background image with a lot of small regions that need rollover illustration highlights, along with additional text display and associated links for each one. The final illustration stacks several static images with transparency…
boomturn
  • 971
  • 1
  • 12
  • 14
65
votes
5 answers

CSS On hover show another element

I want to use CSS to show div id='b' when I hover over div id='a', but I cannot figure out how to do it because the div 'a' is inside another div that div 'b' is not in.
Hover me
user2770029
  • 722
  • 1
  • 7
  • 8
64
votes
2 answers

How to toggle class using pure javascript in html

I have a
, and I want to toggle its classes on hover. Here is my code: function a(){ this.classList.toggle('first'); this.classList.toggle('sec'); } document.querySelector('#container').addEventListener('click', a ); I know there is no…
user2906766
  • 863
  • 3
  • 10
  • 12
63
votes
8 answers

Differences between CSS3 :hover and :focus?

The CSS3 doc talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing? Thanks!
Pete Wilson
  • 8,610
  • 6
  • 39
  • 51