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

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)

Does css hover work on mobile devices?

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)

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)

How to prevent sticky hover effects for buttons 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'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's probably quite bad for performance, and doesn'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't work right on devices with both touch and a mouse.

What I would prefer is removing the hover state ontouchend. But it doesn't seem like that is possible. Focusing another element doesn't remove the hover state. Tapping another element manually does, but I can't seem to trigger that in JavaScript.

All the solutions I have found seem imperfect. Is there a perfect solution?


Source: (StackOverflow)

Is it possible to change only the alpha of a rgba background colour on hover?

I have a set of <a> 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:

 <a rel='nofollow' href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a rel='nofollow' href="#"><img src="" /><div class="green">Link 2</div></a> 

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 <a> is hovered over, yet keep the colour unchanged.

Something like

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

Source: (StackOverflow)

Eclipse: hover background color property, where?

I changed a while ago to black the background color visible when hovering code. For example when you hover over a method, you see its signature in a box; I mean the background color of that box. It should be a global property, because other boxes (I think always boxes like that) use the same bg color. I believe indeed the background color in the box that shows the heap status (if you have this activated) has the same color property.

I want to rechange it but I don't find the property anywhere. Do you know which property it is?

I've looked basically everywhere...


Source: (StackOverflow)

Delay :Hover in CSS3?

Is there a way to delay the :Hover event without using javascript? I know there is a way to delay animations, but I haven't seen anything on delaying the :Hover event.

Edited...

Sorry, I should have included this to begin with... I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent does without adding the extra JS weight. I'd prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu.

Updated

Here is the final code... http://jsfiddle.net/aEgV3/

Thanks for all the help!


Source: (StackOverflow)

image moves on hover - chrome opacity issue

There seems to be an issue with my page here: http://metallica-gr.net/photos/photos.html

When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.

My css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    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: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Source: (StackOverflow)

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

When the div is hovered over, a CSS transition effect moves the 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).

2nd EDIT: Actually, problem NOT solved!

In creating a JSFiddle to illustrate the problem I stumbled across an interesting observation. The problem only happens 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...

Any ideas?!


Source: (StackOverflow)

Using JQuery hover with HTML image map

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.

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.

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!

sample hover setup (I’ll ultimately use arrays for real rollovers, associated links and text):

$('#triangle').hover(
    function() {
    	$('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
    	$('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

image map:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
    	<area shape="polygon" coords="20,20,106,20,106,106,20,106" rel='nofollow' href="http://www.stackoverflow.com" id="box" />
    	<area shape="polygon" coords="216,50,339,50,277,156" rel='nofollow' href="http://www.google.com" id="triangle" />
    	<area shape="polygon" coords="460,0,574,0,460,220" rel='nofollow' href="http://www.cnn.com" id="bordertriangle" />
    	<area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" rel='nofollow' href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Source: (StackOverflow)