hover interview questions
Top hover frequently asked interview questions
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 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 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)
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)
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)
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)
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)
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)
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)
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)
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 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)
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)
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)