Hover
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 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 am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.
Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.
Wish I had more information, but maybe someone else has run into a similar problem.
.swatch {
-webkit-box-shadow: #EFEFEF 2px 2px 0px;
-webkit-transform: scale(1);
-webkit-transition-duration: 0.2s;
border: 1px solid white;
position: relative;
z-index: 1;
.swatch:hover {
position:relative;
z-index:10;
transition-duration: 0.2s;
transform:scale(1.8);
-webkit-transition-duration: 0.2s;
-webkit-transform:scale(1.8);
}
It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.
Any thoughts are appreciated.
Source: (StackOverflow)
I'm looking for method for my hovering issue.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Now, both classes (image and layer) has borders, both have different color for normal and hover.
Is there way to make so if I hover layer class, both layer and image class hovering border color is active? And vise versa?
Source: (StackOverflow)
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.
Source: (StackOverflow)
I want a simple slide down / up animation on a mouse over of a link. I can get the mouse over to work but I can't work out how to get the mouseout to do it's thing.
Here's what I have for the hover effect:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery
google.setOnLoadCallback(function() {
jQuery(
function($) {
$("a.button").hover(function(){$(this).animate({"marginTop": "0px"}, "fast")
});
});
});
</script>
How do I get this to move the margin up 16px when mouse out?
Source: (StackOverflow)
I have a nested CSS menu that I can't get the submenus to come up.
I took the code from A list apart. The example on that site works perfectly fine, but since I have 2 CSS navigational menus on my page, I have to put my HTML elements in different CSS classes.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul#lvl1 {
margin:0;
padding:0;
list-style:none;
width:150px; /* Width of Menu Items */
border-bottom:1px solid #ccc;
}
li.lvl1 {position:relative}
ul.lvl2 {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
li.lvl1 > a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html.lvl1 > ul > li {float:left;height:1%}
* html.lvl1 > ul > li > a {height:1%}
/* End */
li.lvl2 > a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li.lvl2 > a { padding: 2px 5px; } /* Sub Menu Styles */
a.lvl1:hover ul.lvl2 {display: block} /* The magic */
</style>
</head>
<body>
<ul id="lvl1">
<li class="lvl1">
<a class="lvl1" rel='nofollow' href="#">item1</a>
<ul class="lvl2">
<li class="lvl2">
<a class="lvl2" rel='nofollow' href="#">subitem1</a>
</li>
</ul>
</li>
<li class="lvl1">
<a class="lvl1" rel='nofollow' href="#">item2</a>
<ul class="lvl2">
<li class="lvl2">
<a class="lvl2" rel='nofollow' href="#">subitem2</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Now when I hover over the "a" on level 1, the "ul" on level 2 won't come up. Can someone please shed some light? I may be missing something obvious. Thanks!
Source: (StackOverflow)
Sometimes it appears helpful to make certain page elements only visible on e.g. hovers. An example is stackoverflow's "feedback - Was this post useful to you?"-widget. As those elements might be crucial to the interface, such a show-on-hover-feature should be a progressive enhancement or, in other terms, unobtrusive and degrade gracefully.
The usual way appears to be employing javascript, e.g. hiding the elements and making them available when a parent element is hovered. The reason for that choice might be :hover is not support for all elements especially in legacy browsers, thereby forbidding you to hide elements in the first place up to css2. (for a js/jQuery example cf. jquery showing elements on hover)
I wonder if you can achieve such a feature safely* with pure css3, using :not(:hover) and :hover, not affecting older browsers. As far as I can see, the requirement is that every browser supporting :not() must support :hover for all elements. According to the following sources, that appears to be the case
Example implementation: http://jsfiddle.net/LGQMJ/
What do you think? Any objections or other sources?
*by safely I mean the browser should always show all elements as a last resort.
Source: (StackOverflow)
Samsung has done something great with the hovering API, and I'm interested in including it in my app. The problem is that the hovering API included in the SPen SDK only work with the SPen and not with the finger detection like the lastest apps do on the samsung Galaxy S4.
Can anyome provide me with a link to the right SDK or even a sample project ?
EDIT : Nifhel commented, fallow this link : Floating Touch on Galaxy S4 (requires API 12 and to create a new class that inherit from TextView for instance)
EDIT : The accepted answer is a better solution and works perfectly well (requires API 14 but easier to use) .
Source: (StackOverflow)
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
(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)
Source: (StackOverflow)
This question already has an answer here:
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 hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" rel='nofollow' href="taskbar.css"/>
<link rel="stylesheet" type="text/css" rel='nofollow' href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake"/>
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi"/>
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body{
font: normal small/3em helvetica, sans-serif;
text-align:left;
letter-spacing:2px;
font-size:16px;
margin:0;
padding:0;
}
div.gradientTop{
position:absolute;
margin-top:5px;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:5px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
div.float{
border-right:1px solid orange;
position:absolute;
z-index:2;
margin-left:5px;
margin-top:5px;
float:left;
width:200px;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
img.left{
z-index:inherit;
margin-bottom:3px;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40)
}
img.left:hover + #album1{
opacity:.4;
}
img.left:hover{
opacity:1.0;
}
#album1{
z-index:2;
width:200px;
color:white;
text-align:center;
position:absolute;
background:orange;
top:70px;
}
Source: (StackOverflow)