EzDev.org

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 the different states for an element. I can't seem to find anything similar in Chrome. Am I missing something?

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, but I still can't see the html or css of the tooltip.

Any ideas?

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 out of firebug to search in the CSS, but as soon as I move my mouse, the selector (obviously) disappears as the nav <li> isn't hovered anymore.

Any way to do this?

Thanks :)

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 <tr> tags within the table and made the css like this .table-row:hover{background:black;}. Now only the non-striped rows are working. Isn'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.

How to affect other elements when a div is hovered

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple example when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

I don't want to explain further because I think it might be confusing, but please ask the the question is no clear enough!

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 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.

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 I may have missed something simple. Here is the code:

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

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 encounter the same problem as this SitePoint post. However, the post does not have proper solution. I've searched everywhere for a solution and can't find one. Surely I can't be the only one trying to do this.

Does anyone have any ideas?

P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.

This is my code:

HTML:

<ul class="nav">
    <li class="first"><a rel='nofollow' href="#">item 0</a></li>
    <li><a rel='nofollow' href="#">item 1</a></li>
    <li><a rel='nofollow' href="#">item 2</a></li>
    <li><a rel='nofollow' href="#">item 3</a></li>
    <li><a rel='nofollow' href="#">item 4</a></li>
</ul>

CSS:

.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: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

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 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 "preload" 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.

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: http://willryan.us/design.html I want it to look exactly like how I have it, but using real text instead of an image.

I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.

Feel free to poke around in my code, I'll paste what I think is relavent here.

HTML

<div id="projectlist">
                <div id="buzzbutton"><a  rel='nofollow' href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a></div>

                <div id="slinksterbutton"><a rel='nofollow' href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a></div>             
</div>

CSS

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;
    }

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 actual click)

is there a workaround ready to solve this? maybe a jquery command i shoudl have used instead of mouseover/out etc.. thanks!

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, does anyone know how?

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 slide:

$('.icon').hover(function() {
        $('li.icon > ul').slideDown('fast');
    }, function() { 
        $('li.icon > ul').slideUp('fast');
    });

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 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'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 "freeze" 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.

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 no mouse, so I don't want any hover effects.

The problem is, when I tap something on the tablet, the browser evidently has some kind of "invisible mouse cursor" 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'm using the mouse, but suppress them when I'm using the touchscreen?

In case someone was thinking of suggesting it, I don'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'm not interested in the device, I'm interested in how it'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 "invisible mouse cursor" 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 "mouse cursor" and lighting up the hover effects anyway -- it's like my preventDefault isn't always honored. I won't bore you with the details unless necessary -- I'm not even sure that's the right approach to take; if anyone has a simpler fix, I'm all ears.

Edit: This can be reproduced with bog-standard CSS :hover, but here's a quick repro for reference.

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

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'm trying to prevent.

I've also posted a sample here that does the above and also hooks jQuery's mouse events. You can use it to see that tap events will also fire mouseenter, mousemove and mouseleave.