How to inspect an element that only appears while I'm hovering another element? As soon as I hover out, the element disappears.
I'm not too sure if the hover effect is done with a CSS class or javascript though.
Its depend on which browser you are using. there is option to select the hover state.
Chrome as a Example:
On a div item I have a expanding hover effect so it gets higher, wider and a shadow give it a z-index of 1 so it appears over other div items.
In that div I am using a tool tip (tipso). This only is visible when I give it a z-index of 2 (or greater) but when I (accidentally) hover over the tool tip bubble the expanding hover effect from the div disappears.
Very logical of course because the tool tip bubble has a higher z-index.
I tried to give the tool tip a z-index of 1 but then it is not showing at all.
Any thoughts?
I don't know exactly how you're doing it - js or css.
But to achieve that behaviour probably you're gonna have to use javascript.
If the tooltip is located inside the div mouseenter and mouseleave events may be your best solution.
I'm animating my navigation links, and scaling them up on hover. Like so:
nav#nav a:hover
color coal
transform scale(1.64)
transform-origin center -109%
This causes the element to move out from under the cursor, reversing the effect, causing it to move back, redoing the hover, stuck in this ugly loop.
How can the hover effect be maintained?
Without actual code I can only give a conceptual answer:
Could you put the item that is animated inside of a div that doesn't change size and apply the hover to that? So you hover over the div it animates the inner object, but the div doesn't move so even after the inner object changes the mouse is still hovering over the div.
JsFiddle
HTML
<p>im a duck</p>
CSS
p:hover {
display:none;
}
Shouldn't it disappear after hovering?
It does disappear.
However, after it disappears, it's no longer hovered, so it re-appears.
Each time you move the mouse, the cycle repeats; if you move the mouse over it, you'll see it flickering.
The exact behavior depends on the browser; in particular, Chrome only recalculates hover states on mouse events.
this will make more sense to you.
html:
<div class="cont"><p>foo</p></div>
css:
.cont{width:100%;height:30px;}
.cont p{}
.cont:hover p{display:none}
hope that helped.
A simple alternative would be to do something like this:
p:hover {
opacity: 0;
}
However, that will only work while the hovering it happening. It's won't hide the element once hovering has ceased.
With display: none you're completely removing the element from visibility, including height and width. So when you hover it, you completely remove it thus resulting in not hovering, then it reappears. It's a pretty interesting cycle.
You may want to look into visbility or trying to set it within a container that doesn't get hidden so you have some sort of hoverable object at all times.
It will be working, but note that once the element goes display: none, you can't hover it anymore, because there's nothing to display. So it goes unhovered, which then allows the rule to apply again, so essentially you're flickering between hovered and un-hovered VERY quickly, essentially making it look like nothing's happening.
display:none
Will hide the element on hover, thus the element is no longer hovered over, so it reappears.
visibility:hidden;
Will set the element to invisible, however under the visibility state the element is no longer listening to the hover event and so will reappear, similar to display:none
Technically, you could do this on hover to get the desired effect
opacity:0;
and the element will remain hidden whilst you are hovering over it. This is due to the element still listening for events as opacity doesn't affect this.
Here's a fiddle comparing the 3
http://jsfiddle.net/mEVHp/1/
You can use javascript to do this job
$('p').hover(function(){
$(this).hide();
});
see this fiddle for more info.
When I mouseover a span.label element I want to show a children span.dM element. Which is perfectly happening in the fiddle below.
Here is the fiddle
What I am trying to achieve is when I hover in the place of where span.dM appears then I should get a gray background for span.label. Currently I have to hover on the text "some text" to see the span.dM element.
I want to fix this without using any width. Any suggestions ? Thanks in advance.
you cannot hover over a display:none.
If it's possible, hide the span with visibility:hidden.
This way the element isn't removed from the document flow, and you can hover on it.
http://jsfiddle.net/z4JBG/
I've forked your jsfiddle, using jquery to achieve the effect you were after.
http://jsfiddle.net/ZrxGf/