I want to use CSS to show `div id=&#39;b&#39;` when I hover over `div id=&#39;a&#39;`, but I cannot figure out how to do it because the `div &#39;a&#39;` is inside another `div` that `div &#39;b&#39;` is not in.

    &lt;div id=&#39;content&#39;&gt;
         &lt;div id=&#39;a&#39;&gt;
             Hover me
         &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&#39;b&#39;&gt;
        Show me
    &lt;/div&gt;


CSS On hover show another element

In my script there are three divs. I want to display div with `class=&quot;ab&quot;` when I hover on first line and display div with `class=&quot;abc&quot;`, when hover on second line. Otherwise I want to display div with `class=&quot;a&quot;` by default.

But it never displays the div with `class=&quot;a&quot;`.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .abc,.ab {
        display: none;
    }
    #f:hover ~ .ab {
        display: block;

    }
    #f:hover ~ .abc,.a {
        display: none;

    }
    #s:hover ~ .abc {
        display: block;

    }
    #s:hover ~ .ab,.a {
        display: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;a id=&quot;f&quot;&gt;Show First content!&lt;/a&gt;
    &lt;br/&gt;
    &lt;a id=&quot;s&quot;&gt;Show Second content!!&lt;/a&gt;
    &lt;div class=&quot;a&quot;&gt;Default Content&lt;/div&gt;
    &lt;div class=&quot;ab&quot;&gt;First content&lt;/div&gt;
    &lt;div class=&quot;abc&quot;&gt;Second content&lt;/div&gt;

&lt;!-- end snippet --&gt;

Here is my JSFiddle of my problem: [JSFiddle Link][1]


  [1]: http://jsfiddle.net/mridulpv/n5fzB/1/

How to display and hide a div with CSS?

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: &quot;hover&quot;`, if I change the pause argument to anything else then the carousel stops working altogether so I&#39;m not sure how to disable this default behaviour.

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

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 &#39;wrapper&#39; is not inside &#39;item&#39;, it&#39;s somewhere else.

I really don&#39;t want to use javascript for something this simple, but if I have to, how would I do it ? Here&#39;s my failed attempt:

    document.getElementsByClassName(&#39;item&#39;)[0].onmouseover=&quot;document.getElementsByClassName(&#39;wrapper&#39;)[0].style.background=&quot;url(&#39;some url&#39;)&quot;;&quot;;

There&#39;s only one element of each class. Don&#39;t know why they didn&#39;t use IDs when they made the template, but that&#39;s just how it is and I can&#39;t change it.

[Edit]

It&#39;s a menu. Each menu element has a distinct class. When you hover on the element a submenu pops up to the right. It&#39;s like an overlay, when I use the &#39;Inspect Element&#39; tool I can see that the whole website html changes when the submenu is active(meaning there&#39;s nothing but the submenu). The class I call &#39;wrapper&#39; has the css that controls the background for the submenu. There&#39;s really no connection that I can see between the two classes.

Use :hover to modify the css of another class?

In stackoverflow, when we hover on a user&#39;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-

     &lt;div=&quot;text&quot;&gt;hover me&lt;/div&gt;

Add hover text without javascript like we hover on a user&#39;s reputation

I have an `&lt;a&gt;` with a `&lt;span&gt;` children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn&#39;t.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    a {
        padding: 50px;
        border: 1px solid black;
    }

    a span {
        position: absolute;
        top: 200px;
        padding: 30px;
        border: 10px solid green;
    }

    a:hover span {
        border: 10px solid red;
    }   

&lt;!-- language: lang-html --&gt;

    &lt;a&gt;
        Parent text
        &lt;span&gt;Child text&lt;/span&gt;    
    &lt;/a&gt;

&lt;!-- end snippet --&gt;

CSS :: child set to change color on parent hover, but changes also when hovered itself

I&#39;d like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don&#39;t (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don&#39;t, so as to avoid having mobile browsers emulate it with extra taps, as this breaks other interactions on the page - by not defining a hover state for those browsers this is avoided.

I&#39;ve read up on the [Interaction Media Queries](https://drafts.csswg.org/mediaqueries-4/#hover) feature and it looks like it should do the trick. I&#39;d be able to do something like:

    @media (hover: none) {
      /* behaviour for touch browsers */
    }

According to [CanIUse](http://caniuse.com/#feat=css-media-interaction) it is available on all the browsers I need to support except IE11 and Firefox.

So I wondered if I could do it the other way around - since the main touch devices all support it, then negate it:

    @media not (hover: none) {
      /* behaviour for desktop browsers */
    }

However, this doesn&#39;t seem to work at all.

Pseudocode example of what I&#39;m trying to do:

    .myelement {
      /* some styling */
      /* note: no hover state here */
    }
    @media(this device supports hover) {
      .myelement:hover {
        /* more styling */
      }
    }

So, is there a way to make this work in the way intended, or am I down the wrong track?

Media query for devices supporting 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 encounter the same problem as [this SitePoint post](http://www.sitepoint.com/forums/showthread.php?t=593181v). However, the post does not have proper solution. I&#39;ve searched everywhere for a solution and can&#39;t find one.
Surely I can&#39;t be the only one trying to do this.

Does anyone have any ideas?

P.S: I don&#39;t know the width of the text in menu items so I cannot just set the width of the li items.

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .nav { margin: 0; padding: 0; }
    .nav li { 
        list-style: none; 
        display: inline; 
        border-left: #ffffff 1px solid; 
    }
    .nav li a:link, .nav li a:visited { 
        text-decoration: none; 
        color: #000; 
        margin-left: 8px; 
        margin-right: 5px; 
    }
    .nav li a:hover{ 
        text-decoration: none; 
        font-weight: bold; 
    }
    .nav li.first { border: none; }

&lt;!-- language: lang-html --&gt;

    &lt;ul class=&quot;nav&quot;&gt;
        &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot;&gt;item 0&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;



Inline elements shifting when made bold on hover

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&#39;t seem to have been carried over. 

I&#39;ve looked through the docs and haven&#39;t found anything.

Angular 2 Hover event

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 loses focus. To be honest, I don&#39;t know why touch devices feel the need to trigger `:hover` in first place - but this is reality, so this problem is reality as well.
```css
a:hover {
  color:blue;
  border-color:green;
  /* etc. &gt; ignore all at once for touch devices */
}
```
**So, (how) can I remove/ignore all CSS `:hover` declarations at once (without having to know each one) for touch devices after having them declared?**


How to remove/ignore :hover css style 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&#39;t want that.

 - I could add a `no-hover` class `ontouchend` for each button, and make
   my CSS like this: `button:not(.no-hover):hover { background-color:
   blue; }` but that&#39;s probably quite bad for performance, and doesn&#39;t
   handle devices like the Chromebook Pixel (which has both a
   touchscreen and a mouse) correctly.
   
 - I could add a `touch` class to the `documentElement` and make my CSS
   like this: `html:not(.touch) button:hover { background-color: blue;
   }` But that also doesn&#39;t work right on devices with both touch and a
   mouse.

What I would prefer is removing the hover state `ontouchend`. But it doesn&#39;t seem like that is possible. Focusing another element doesn&#39;t remove the hover state. Tapping another element manually does, but I can&#39;t seem to trigger that in JavaScript.

All the solutions I have found seem imperfect. Is there a perfect solution?

How to prevent sticky hover effects for buttons on touch devices

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 resize ever so slightly?) so that it appears out of place and out of focus...

The glitch seems to apply the whole time the hover effect is applied, and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div (box shadow and opacity are also applied but make no difference to the error when removed).


The problem only seems to happen when the page has scrollbars. So the example with just one instance of the div is fine, but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again...


&lt;!-- 

wayback link does not seem to produce MCVE

https://web.archive.org/web/20140801000000*/https://www.tesstyler.com/StackOverflow/index.html

--&gt;

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

Note: I&#39;ve read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.

I find &quot;Inspect Element&quot; an invaluable tool in Chrome, however my latest foray as I learn the wizardly ways many of you already possess saw me creating a sub-menu for an element on my nav bar, which pops up below on hover of it&#39;s parent item.

The popup(or down) isn&#39;t quite styled how I&#39;d like, so I right-click &gt; inspect element to see what&#39;s coming from where exactly, and get a better idea of how to achieve my desired effect.

However, as soon as I move my mouse away from the menu, it&#39;s gone.

So I can&#39;t select different elements in the inspection pane, and see which area is highlighted at the same time.


Is there a way around this, without changing the menu so that it stays &quot;popped up&quot; once activated?

&quot;Inspect&quot; a hover element?

I would like to show a div when hovering over an element in vue.js. But I can&#39;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 methods? 

Mouseover or hover vue.js

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 that would be awesome. 

How can I access a hover state in reactjs?

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 animation from `#999` to `black`. How can I create the opposite effect when the mouse leaves the item area, with an animation from `black` to `#999`?

[jsFiddle][1]

(Have in mind that I do not wish to answer only this example, but the entire &quot;opposite of `:hover`&quot; issue.)

  [1]: http://jsfiddle.net/Cthulhu/SZqkb/

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

I am trying to view, through Chrome&#39;s developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I &quot;inspect element&quot;, nothing shows for the tooltip in the html. I know I can set the Style to `:hover`, but I still can&#39;t see the html or css of the tooltip. 

Any ideas?

Inspect hovered element in Chrome?

on many sites, such as http://www.clearleft.com, you&#39;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, does anyone know how?


How to affect other elements when one element is hovered

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 actual click)

is there a workaround ready to solve this? maybe a jquery command i shoudl have used instead of mouseover/out etc..
thanks!

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

With some HTML like this:

    &lt;p&gt;Some Text&lt;/p&gt;

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&#39;t think of an easy way to do this.

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

I&#39;ve got a list, and I have a click handler for its items:

    &lt;ul&gt;
      &lt;li&gt;foo&lt;/li&gt;
      &lt;li&gt;goo&lt;/li&gt;
    &lt;/ul&gt;

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 when I hover over the list items.

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

I&#39;m writing a Web site that&#39;s meant to be used from both desktops and tablets. When it&#39;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&#39;s no mouse, so I don&#39;t want any hover effects.

The problem is, when I tap something on the tablet, the browser evidently has some kind of &quot;invisible mouse cursor&quot; that it moves to the location I tapped, and then leaves it there -- so the thing I just tapped lights up with a hover effect until I tap something else.

**How can I get the hover effects when I&#39;m using the mouse, but suppress them when I&#39;m using the touchscreen?**

In case someone was thinking of suggesting it, I don&#39;t want to use user-agent sniffing. The same device could have both a touchscreen and a mouse (maybe not so common today, but much more so in the future). I&#39;m not interested in the device, I&#39;m interested in how it&#39;s currently being used: mouse or touchscreen.

I already tried hooking the `touchstart`, `touchmove`, and `touchend` events and calling `preventDefault()` on all of them, which does suppress the &quot;invisible mouse cursor&quot; some of the time; but if I tap rapidly back and forth between two different elements, after a few taps it will start moving the &quot;mouse cursor&quot; and lighting up the hover effects anyway -- it&#39;s like my `preventDefault` isn&#39;t always honored. I won&#39;t bore you with the details unless necessary -- I&#39;m not even sure that&#39;s the right approach to take; if anyone has a simpler fix, I&#39;m all ears.

----

**Edit:** This can be reproduced with bog-standard CSS `:hover`, but here&#39;s a quick repro for reference.

    &lt;style&gt;
      .box { border: 1px solid black; width: 150px; height: 150px; }
      .box:hover { background: blue; }
    &lt;/style&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;

If you mouse over either of the boxes, it will get a blue background, which I want. But if you tap on either of the boxes, it will also get a blue background, which is the thing I&#39;m trying to prevent.

I&#39;ve also posted a sample [here](http://sandbox.excastle.com/stackoverflow/8291517.html) that does the above and also hooks jQuery&#39;s mouse events. You can use it to see that tap events will also fire `mouseenter`, `mousemove` and `mouseleave`.

Disable hover effects on mobile browsers

I have a set of `&lt;a&gt;` tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the opacity of the rgba attribute?

A quick example of the code:

     &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;&quot; /&gt;&lt;div class=&quot;brown&quot;&gt;Link 1&lt;/div&gt;&lt;/a&gt;
     &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;&quot; /&gt;&lt;div class=&quot;green&quot;&gt;Link 2&lt;/div&gt;&lt;/a&gt; 

And the styles

    a {display: block; position: relative}
    .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
    .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

What I would like to do is write a single style that would change the opacity when the `&lt;a&gt;` is hovered over, yet keep the colour unchanged. 

Something like

    a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}



Is it possible to change only the alpha of a rgba background colour on 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.

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

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 ways to accomplish this in the inspector?

How to use chrome web inspector to view hover code

	

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 using the same class.

    .buttonDisabled
     {
     Cursor:text !important; Text-Decoration: None !important; 
     } 

The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.


CSS disable hover effect

I&#39;m trying to make a **div&#39;s background color change on mouse over**.



&gt;  the div {background:white;}  
the div a:hover{background:grey; width:100%;  
&gt;display:block;  text-decoration:none;}


**only** the **link** inside the div **gets the background color**.  

what could I do to make the **whole div get that background color?**


thank you

**EDIT :**  
how can I make the whole div to act as a link - when you click anywhere on that div, to take you to an address.

div background color, to change onhover

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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;;
    	filter:alpha(opacity=50);
    	-moz-opacity: 0.5; 
    	opacity: 0.5;
    	-khtml-opacity: 0.5;
    	display:block;
    	border:1px solid #121212;
    }
    .img:hover{
    	-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
    	filter:alpha(opacity=100);
    	-moz-opacity: 1; 
    	opacity: 1;
    	-khtml-opacity: 1;	
    	display:block;
    }

image moves on hover - chrome opacity issue

I&#39;m looking for a method for my hovering issue.

    &lt;div class=&quot;section&quot;&gt;
      &lt;div class=&quot;image&quot;&gt;&lt;img src=&quot;myImage.jpg&quot; /&gt;&lt;/div&gt;
      &lt;div class=&quot;layer&quot;&gt;Lorem Ipsum&lt;/div&gt;
    &lt;/div&gt;

Now, both classes, image and layer, have borders. Both have different color for normal and hover.
Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?

CSS: Hover one element, effect for multiple elements?

Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven&#39;t seen anything on delaying the :hover event.

I&#39;m building a son-of-suckerfish like menu. I&#39;d like to simulate what hoverIntent does without adding the extra JS weight. I&#39;d prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu.

Example of menu markup:

    &lt;div&gt;
        &lt;div&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;
                &lt;li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;


Here is the full demo: http://jsfiddle.net/aEgV3/


How can I delay a :hover effect in CSS?

I am trying to achieve something like this:

![this effect][1]

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&#39;t work out for this case.
Also, another issue -- every image has a different height. The width is always the same.

How can this effect be achieved?


  [1]: http://i.stack.imgur.com/Wtjqz.png

How to make in CSS an overlay over an image?

I&#39;m trying to show a description when hovering over an image. I&#39;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&#39;ve tried a few different things but I can&#39;t seem to figure out how to do it. I&#39;m trying to do it using HTML and CSS only, but I&#39;m not sure if that&#39;s possible.

Feel free to poke around in my code, I&#39;ll paste what I think is relavent here.


**HTML**

   

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div#projectlist {
      width: 770px;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 40px;
    }

    div#buzzbutton {
      display: block;
      float: left;
      margin: 2px;
      background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
      width: 150px;
      height: 150px;
    }

    div#buzzbutton:hover {
      background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
      width: 150px;
      height: 150px;
      background-position: 0 -150px;
    }

    div#slinksterbutton {
      display: block;
      float: left;
      background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
      width: 150px;
      height: 150px;
      margin: 2px;
    }

    div#slinksterbutton:hover {
      background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
      width: 150px;
      height: 150px;
      background-position: 0 -150px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;projectlist&quot;&gt;
      &lt;div id=&quot;buzzbutton&quot;&gt;
        &lt;a href=&quot;buzz.html&quot; title=&quot;&quot;&gt;&lt;img src=&quot;content/assets/thumbnails/transparent_150x150.png&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
      &lt;/div&gt;

      &lt;div id=&quot;slinksterbutton&quot;&gt;
        &lt;a href=&quot;slinkster.html&quot; title=&quot;&quot;&gt;&lt;img src=&quot;content/assets/thumbnails/transparent_150x150.png&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to show text on image when hovering?

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&#39;t change height and width and overlaps the other one. I&#39;m still pretty new to HTML/CSS so I may have missed something simple. Here is the code:


    &lt;img src=&quot;LibraryTransparent.png&quot; id=&quot;Library&quot;&gt;

&lt;!-- language: lang-css --&gt;

    #Library {
		height: 70px;
		width: 120px;
	}
		
	#Library:hover {
		background-image: url(&#39;LibraryHoverTrans.png&#39;);
		height: 70px;
		width: 120px;
	}

Changing image on hover with CSS/HTML

I&#39;m including an SVG image file on my page within an `object` tag, like this:

    &lt;object type=&quot;image/svg+xml&quot; data=&quot;linkto/image.svg&quot;&gt;
       &lt;!-- fallback image in CSS --&gt;
    &lt;/object&gt;

The image in question is a world map, i want to transition the `fill` property when the mouse hovers over a `group`, in this case I&#39;ve grouped my SVG by continent, so South America looks something like this:

    &lt;g id=&quot;south_america&quot;&gt;
	    &lt;path fill=&quot;#FAFAFA&quot; d=&quot;(edited for brevity)&quot;/&gt;
    &lt;/g&gt;

I can get the `fill` property to change on hover by using the following CSS at the top of my SVG document:

    &lt;style&gt;
    #south_america path {
	    transition: fill .4s ease;
	}
	#south_america:hover path {
	    fill:white;
	}
    &lt;/style&gt;

But I can&#39;t get the `fill` colour to fade in with a CSS transition, the colour just changes instantly, can anyone shed light on this please?

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

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&#39;d use Firebug to inspect the element that&#39;s giving me trouble and see what its CSS properties were, and where those properties come from. However, when hovering is involved, it becomes impossible, because as soon as you move your mouse down to the Firebug panel, the elements you&#39;re interested in are no longer hovered, the CSS rules that apply are different, and (in the case of JS hovers) the DOM is changed.

Is there any way I can &quot;freeze&quot; the state of the DOM and application of :hover in order to inspect the DOM as it was **during** a hover event?

Any other ideas on how to debug this sort of issue are welcome, of course.

How to debug CSS/Javascript hover issues

I have the following HTML:

    &lt;div class=&quot;menu&quot;&gt;
        &lt;a class=&quot;main-nav-item&quot; href=&quot;home&quot;&gt;home&lt;/a&gt;
        &lt;a class=&quot;main-nav-item-current&quot; href=&quot;business&quot;&gt;business&lt;/a&gt;
        &lt;a class=&quot;main-nav-item&quot; href=&quot;about-me&quot;&gt;about me&lt;/a&gt;
    &lt;/div&gt;

In CSS, I want to set the `a:hover` for these menu items to a particular color. So I write:

    .menu a:hover
    {
        color:#DDD;
    }

But, I want to set this `a:hover` color only for those `&lt;a&gt;` tags with the class *main-nav-item* and not the *main-nav-item-current*, because it has a different color and shouldn&#39;t change on hover. All `&lt;a&gt;` tags within the *menu* div should change color on hover except the one with the *current* class.

How can I do it using CSS?

I tried something like

    .menu a:hover .main-nav-item
    {
        color:#DDD;
    }

thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.


Set a:hover based on class

Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn&#39;t work on mobile browsers.

Does css hover work on mobile devices?

When I&#39;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 &quot;sticky&quot; state to hover rules in Firebug? 

Example; I hover over a nav bar and want to copy the selector out of firebug to search in the CSS, but as soon as I move my mouse, the selector (obviously) disappears as the nav `&lt;li&gt;` isn&#39;t hovered anymore.

Any way to do this?

Thanks :)

Can you make hovered state in Firebug &quot;sticky?&quot;

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
    {
        background-color:#F9EDBE;
        
    }

**HTML**
-

    &lt;div&gt;
        &lt;div class=&quot;e&quot; &gt;Company&lt;/div&gt;
        &lt;div class=&quot;e&quot;&gt;Target&lt;/div&gt;
        &lt;div class=&quot;e&quot; style=&quot;border-right:0px;&quot;&gt;Person&lt;/div&gt;
    &lt;/div&gt;         
    &lt;div class=&quot;f&quot;&gt;
        &lt;div class=&quot;e&quot;&gt;Company&lt;/div&gt;
        &lt;div class=&quot;e&quot;&gt;Target&lt;/div&gt;
        &lt;div class=&quot;e&quot; style=&quot;border-right:0px;&quot;&gt;Person&lt;/div&gt;
    &lt;/div&gt;   
    &lt;div&gt;
        &lt;div class=&quot;e&quot;&gt;Company&lt;/div&gt;
        &lt;div class=&quot;e&quot;&gt;Targetaaa&lt;/div&gt;
        &lt;div class=&quot;e&quot; style=&quot;border-right:0px;&quot;&gt;Person&lt;/div&gt;
    &lt;/div&gt;            
    &lt;div class=&quot;f&quot;&gt; 
        &lt;div class=&quot;e&quot;&gt;Company&lt;/div&gt;
        &lt;div class=&quot;e&quot;&gt;Target&lt;/div&gt;
        &lt;div class=&quot;e&quot; style=&quot;border-right:0px;&quot;&gt;Person&lt;/div&gt;
    &lt;/div&gt;  

div hover background-color change?

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(&#39;path/to/image-hovered.jpg&#39;);
    }

When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?

I tried to search Stack Overflow for the similar question, but with no luck.

Just added:

* Should I &quot;preload&quot; the hovered image? How?
* Should I play with z-index or opacity? 

It happens with all browsers and thus the solution should work for all browsers.

css: avoid image hover first time blinking

I have seen this jQuery syntax:

    if($(element).is(&#39;:hover&#39;)) { 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 `mouseout`, but I&#39;m wondering if there is some way to inspect the element&#39;s native properties via the DOM instead? Maybe something like this:

    if(element.style.className.hovered === true) {do something}

Also, it must be cross browser compatible.

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

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 `&lt;tr&gt;` tags within the table and made the css like this `.table-row:hover{background:black;}`. Now only the non-striped rows are working. Isn&#39;t there a class in bootstrap that will allow me to easily implement this? Or should I use `JQuery` to fix this? I really cannot figure this one out by myself.

Bootstrap table row hover

I want to change a CSS property of a class using JavaScript. What I actually want is when a `&lt;div&gt;` is hovered, another `&lt;div&gt;` should become visible.

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .left,
    .right {
      margin: 10px;
      float: left;
      border: 1px solid red;
      height: 60px;
      width: 60px
    }

    .left:hover,
    .right:hover {
      border: 1px solid blue;
    }

    .center {
      float: left;
      height: 60px;
      width: 160px
    }

    .center .left1,
    .center .right1 {
      margin: 10px;
      float: left;
      border: 1px solid green;
      height: 60px;
      width: 58px;
      display: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;left&quot;&gt;
      Hello
    &lt;/div&gt;
    &lt;div class=&quot;center&quot;&gt;
      &lt;div class=&quot;left1&quot;&gt;
        Bye
      &lt;/div&gt;
      &lt;div class=&quot;right1&quot;&gt;
        Bye1
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;right&quot;&gt;
      Hello2
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.

How to change CSS property using JavaScript

&lt;p&gt;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 using z-index, and the highlight rollover illustrations need to display in one of the in-between “sandwich” layers to achieve the desired effect.&lt;/p&gt;
&lt;p&gt;After some unsuccessful fiddling with blocks, I decided this might be done with an old-school image map. I made a schematic test map with four geometric shape outlines and “filled” them using with png rollovers. The idea is to associate the image map with the bottom background layer, initialize all the rollovers with css {visibility: hidden} and use Jquery’s hover method to make them visible as well as reveal associated text in a separate div. The separate text function is why I’m not trying to this with the :hover pseudoclass instead of jQuery hover. Because I was using the image map, I made all the rollover pngs (which have transparent backgrounds) sized to the full container for exact placement so everything lines up precisely.&lt;/p&gt;
What I got works... not really! The image map is correctly mapped to activate only the geometric areas. But the href from each rollover area works only intermittently, and using Jquery hover with css visibility is messed up. Desired behavior is that rolling into the area simply would make the shape solid. What actually happens is any motion inside the shape makes rapid toggling between visible and hidden; when the cursor stops within the shape, it might be visible or it might not. Any ideas appreciated!&lt;/p&gt;


&lt;p&gt;sample hover setup (I’ll ultimately use arrays for real rollovers, associated links and text):&lt;/p&gt;

    $(&#39;#triangle&#39;).hover(
    	function() {
    		$(&#39;#ID_triangle&#39;).css({&#39;visibility&#39; : &#39;visible&#39;});
    	},
    	function() {
    		$(&#39;#ID_triangle&#39;).css({&#39;visibility&#39; : &#39;hidden&#39;});
    	}
    )

&lt;p&gt;image map:&lt;/p&gt;

    &lt;div id=&quot;container&quot;&gt;
    	&lt;img src=&quot;images/testMap_w.png&quot; width=&quot;800&quot; height=&quot;220&quot; alt=&quot;TestMap W&quot; usemap=&quot;#testMap&quot;&gt;
    	&lt;map name=&quot;testMap&quot;&gt;
    		&lt;area shape=&quot;polygon&quot; coords=&quot;20,20,106,20,106,106,20,106&quot; href=&quot;http://www.stackoverflow.com&quot; id=&quot;box&quot; /&gt;
    		&lt;area shape=&quot;polygon&quot; coords=&quot;216,50,339,50,277,156&quot; href=&quot;http://www.google.com&quot; id=&quot;triangle&quot; /&gt;
    		&lt;area shape=&quot;polygon&quot; coords=&quot;460,0,574,0,460,220&quot; href=&quot;http://www.cnn.com&quot; id=&quot;bordertriangle&quot; /&gt;
    		&lt;area shape=&quot;polygon&quot; coords=&quot;704,65,769,115,744,196,665,196,640,115&quot; href=&quot;http://slashdot.org&quot; id=&quot;pentagon&quot; /&gt;
    	&lt;/map&gt;
    	&lt;img src=&quot;images/testMap_box.png&quot; width=&quot;800&quot; height=&quot;220&quot; alt=&quot;TestMap Box&quot; id=&quot;ID_box&quot;&gt;
    	&lt;img src=&quot;images/testMap_triangle.png&quot; width=&quot;800&quot; height=&quot;220&quot; alt=&quot;TestMap Triangle&quot; id=&quot;ID_triangle&quot;&gt;
    	&lt;img src=&quot;images/testMap_border_triangle.png&quot; width=&quot;800&quot; height=&quot;220&quot; alt=&quot;TestMap Border Triangle&quot; id=&quot;ID_bordertriangle&quot;&gt;
    	&lt;img src=&quot;images/testMap_pentagon.png&quot; width=&quot;800&quot; height=&quot;220&quot; alt=&quot;TestMap Pentagon&quot; id=&quot;ID_pentagon&quot;&gt;
    &lt;/div&gt;

Using JQuery hover with HTML image map

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 :

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    img {
      border-radius: 50%;
    }

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;http://i.imgur.com/3DWAbmN.jpg&quot; /&gt;

&lt;!-- end snippet --&gt;



Spin or rotate an image on hover

I have a `&lt;div&gt;`, and I want to toggle its classes on hover.

Here is my code:

    function a(){
        this.classList.toggle(&#39;first&#39;);
    	this.classList.toggle(&#39;sec&#39;);
    }
    document.querySelector(&#39;#container&#39;).addEventListener(&#39;click&#39;, a );

I know there is no problem in my html or css. It is just that I have to change and put something in place of `click`, but I don&#39;t know what. 

Please help!!

How to toggle class using pure javascript in html

The &lt;a href=&quot;http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act&quot;&gt; &lt;b&gt;CSS3 doc&lt;/b&gt;&lt;/a&gt; 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!

All Hover Solutions on Gang of Coders

Total of 48 Hover Solutions