smallseo.info

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

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

Source: (StackOverflow)

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?


Source: (StackOverflow)

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!


Source: (StackOverflow)

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.


Source: (StackOverflow)

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!


Source: (StackOverflow)

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


Source: (StackOverflow)

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?


Source: (StackOverflow)

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.


Source: (StackOverflow)

Hover one element, and change another (without using Javascript)

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)

Is `:not(:hover)` and `:hover` a safe way to hide accessible elements?

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 hovering API with finger

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)

CSS: opposite of :hover (on mouse leave)?

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)

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

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)

How do I inspect CSS pseudo classes with firebug?

I am struggling with a reluctant a:hover css style which I cannot override.

I tried to inspect the element in Firebug, but I cannot see why it won't work. I don't even see how to properly inspect a:hover css event in Firebug.

I have seen:
Hover Inspection in Firebug http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/
but I have not figured out how to reproduce the steps mentioned there.

Also: Pseudo-Phantoms http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

How do I inspect/debug CSS pseudo classes like :hover with Firebug?


Source: (StackOverflow)

div hover background-color change?

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

<div>
    <div class="e" >Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>         
<div class="f">
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>   
<div>
    <div class="e">Company</div>
    <div class="e">Targetaaa</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>            
<div class="f"> 
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>  

Source: (StackOverflow)