A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Hover.css - A collection of CSS3 powered hover effects
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?
Source: (StackOverflow)
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?
Source: (StackOverflow)
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 :)
Source: (StackOverflow)
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.
Source: (StackOverflow)
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
, #cube
is 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!
Source: (StackOverflow)
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.
Source: (StackOverflow)
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;
}
Source: (StackOverflow)
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; }
Source: (StackOverflow)
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.
Source: (StackOverflow)
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;
}
Source: (StackOverflow)
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!
Source: (StackOverflow)
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?
Source: (StackOverflow)
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');
});
Source: (StackOverflow)
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.
Source: (StackOverflow)
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
.
Source: (StackOverflow)