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

How to display and hide a div with CSS?

In my script there are three divs. I want to display div with class="ab" when I hover on first line and display div with class="abc", when hover on second line. Otherwise I want to display div with class="a" by default. But it never displays the div…
mridul
  • 1,986
  • 9
  • 29
  • 50
62
votes
5 answers

Use :hover to modify the css of another class?

Is there a way to modify the css for one class when hovering on an element from another class using only css ? Something like: .item:hover .wrapper { /*some css*/ } Only 'wrapper' is not inside 'item', it's somewhere else. I really don't want to…
Kesarion
  • 2,808
  • 5
  • 31
  • 52
61
votes
7 answers

Media query for devices supporting hover

I'd like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don't (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don't,…
moogal
  • 1,599
  • 2
  • 11
  • 12
60
votes
9 answers

How to disable the hover effect of material-ui button inside of a styled component

I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this? import Button from 'material-ui/Button' import styled from 'styled-components' const StyledButton = styled(Button)` …
ccd
  • 5,788
  • 10
  • 46
  • 96
57
votes
9 answers

Is it possible to prevent the Bootstrap carousel pause on mouse hover and continue automatically cycling?

Is it possible to prevent the Bootstrap carousel pause on mouse hover behaviour and continue automatically cycling through the items instead? The documentation only mentions the default behaviour of pause: "hover", if I change the pause argument to…
Andy Bowskill
  • 1,734
  • 3
  • 18
  • 36
50
votes
2 answers

React event onMouseLeave not triggered when moving cursor fast

Im trying to implement hover event but onMouseLeave is not always triggering when leaving element especially when moving cursor over elements fast. I tried i Chrome, Firefox and Internet Explorer but in every browser same problem appeared. My…
zazmaister
  • 667
  • 1
  • 7
  • 10
49
votes
2 answers

Hover on child should turn off hover effect on parent

I have two nested div's
I want to change the background from .parent when I hover over .parent. I want the background to turn normal again when I hover over .child. For example, when I hover…
EaterOfCode
  • 2,202
  • 3
  • 20
  • 33
49
votes
9 answers

How to tell .hover() to wait?

I have a drop down menu. Now when it's slided down to multiple levels, I'd like it to add wait time for like 2 secs, before it disappears, so the user can get back in, when he breaks the .hover() by mistake. Is it possible? my code for the…
Michal
45
votes
2 answers

Is there any way to hover over one element and affect a different element?

I want it to be as simple as this, but I know it isn't: img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } So when you…
Marlon
  • 597
  • 2
  • 8
  • 17
45
votes
8 answers

Combine hover and click functions (jQuery)?

Can hover and click functions be combined into one, so for example: click: $('#target').click(function() { // common operation }); hover: $('#target').hover(function () { // common operation }); can they be combined into one function?…
eozzy
  • 66,048
  • 104
  • 272
  • 428
44
votes
8 answers

How to change the link color in a specific class for a div CSS

In my Page the following CSS is set: a:link { color: #0094DE; text-decoration: none; } a:visited { text-decoration: none; color: #0094DE; } a:hover { text-decoration: underline; color: #DD127B; } I want to Change the Link color…
Anil Jain
  • 481
  • 1
  • 4
  • 7
42
votes
4 answers

Adding hover CSS attributes via jQuery/Javascript

Some CSS styles need to be applied to an element on hover, and CSS styles have to be applied using javascript/jquery directly and not through stylesheets or $(this).addClass('someStyle') because I am injecting the DOM elements into another page. We…
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
41
votes
11 answers

Style SVG circle with CSS

So I have my SVG-circle. I want it to be 120% when one hover the circle. I tried both with width, height and stroke. Haven't find any…
Sebastian
  • 487
  • 1
  • 5
  • 10
41
votes
10 answers

HTML table highlight row on hover except first row (header)

All, I have an ASP.NET GridView that is rendered to an HTML table.
Col 1 HeadCol 2 Head
Data 1Data 2
Data 3Data 4
I want to highlight the…
Andez
  • 5,588
  • 20
  • 75
  • 116
1 2 3
…
99 100