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.
Related
I really like this solution for CSS tooltips and have used a version of it myself for a while. But I just came across an issue with it that I hadn't encountered before with the content of multiple tooltips overlapping each other and I'm not sure how best to solve it.
The solution mentioned is based on managing the opacity of absolutely positioned tooltip content. Clean, elegant, and doesn't need JavaScript.
In my case, I need the tooltips for data shown in a table, so the HTML looks something like this:
<td class="tooltipContainer">Tooltip container text
<div class="tooltip">
Contents of tooltip, can include HTML
</div>
</td>
The CSS includes:
.tooltipContainer {
position: relative;
}
.tooltip {
position: absolute;
[...other stuff...]
opacity: 0;
transition: opacity .8s;
}
.tooltipContainer:hover .tooltip {
opacity: .95;
}
But in order to hide the tooltip once the mouse leaves the tooltip container (otherwise you get strange behaviour with tooltips showing up without hovering over the container), you need another rule to hide the tooltip when hovering over it, so I used this:
.tooltipContainer .tooltip:hover {
opacity: 0;
}
The problem is when you have a tooltip that is below another tooltip, i.e. its contents stay hidden when hovering over the container because you're also hovering over the hidden tooltip from above.
Here's a JSFiddle demonstrating the problem: http://jsfiddle.net/k1wbnbn4/
As you can see, the top and bottom rows work as expected, but the tooltip containers for the second row are covered by the tooltips for the first row, so they stay hidden.
And here's another fiddle with that last rule excluded: http://jsfiddle.net/8ufzrt71/1/ (just to demonstrate why I think it is needed).
I've tried strange things, like a :not rule to get the tooltips to always show when hovering over the container, whether covered by another tooltip or not, but always hide when hovering over the tooltip contents. But I'm stuck and can't seem to get it to work the way I want.
How do I get the tooltips to show when and only when hovering over their containers without straying too far from the basic principle for these CSS tooltips?
Ok, so I've been looking for other ways to tackle this than just getting the CSS selectors right to do what I'm after, and, looking at toggling display instead of opacity, came across this answer, which got me onto the idea of setting/toggling visibility as well as opacity. So to show the tooltip, essentially I set:
opacity: 1;
visibility: visible;
And to hide it:
opacity: 0;
visibility: hidden;
This finally gets my tooltips to behave as they should even when a container is covered by a hidden tooltip from above, because if it's not visible, it can't trigger the hover (which it can trigger when it's just completely transparent). Here's the forked fiddle:
http://jsfiddle.net/4k90opzv/1/
I have many images that all of them will have the same effect in hover, so I made to layers. I is the image and one is the hover effect.
http://jsfiddle.net/jmXdh/13/
So in hover the second layer loads, also i want to give an effect to the main image. only in hover. As you can see I gave grayscale effect to it. but in hover, both 2 hovers don't load at the same time. why is that ?
this is what I got for the main image hover:
a:hover .img{-webkit-filter: grayscale(100%);}
Also I would it happen with transition.
You'll need to add a positive z-index value to your .play class to ensure that that element doesn't get pushed behind the image when the filter is applied to it.
Any webkit css is only working to browsers that support webkit
The double hover effect is working.
I test it by changing the css a bit:
a:hover img{border:2px solid #F00;}
http://jsfiddle.net/jmXdh/21/
I have a div on top of a thumbnail which displays some information. On the thumbnail I want to do drag/drop events but I can't to that because the div on top hides the selection. Is is possible to make the div visible but not interfer the drag/drop selection. I hope you understand my problem.
I have no code because nothing is done!
You can make an element transparent to mouse interaction by adding a CSS property of pointer-events:none. So for example, if your div has ID overlay, you could use:
#overlay{
pointer-events:none;
}
if you can create an onclick-event for the info div that sets the focus to thumbnail, you will then be able to use the drag/drop...
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
I've been doing my homework and it appears you can't use the CSS transition effect where you're using display:none; and display:inline; and so on.
I'm wanting to add a fade in and out on hover to my CSS dropdown menu to make it look cleaner. This isn't possible when using the display element as I've discovered.
I tried removing display from my CSS but when I do this the element is there (despite not being visible) and fades in when you hover over it. I read a suggestion to add "pointer-events:none;" to this, which isn't cross browser compatible. It also causes the fading element to flicker if you run your mouse over it again.
I also used a CSS keyframes animation suggestion to fade in whilst using the display element, but couldn't get this to fade out when the mouse leaves. :(
I know this is possible because I've seen it on many websites but I just can't get it working right for mine.
Here's my code:
http://pastebin.com/zVQapUNz
I've written your code in jsfiddle.net
http://jsfiddle.net/3PD7D/1/
this does work when the mouse moves over it, you can use the same concept to change the opacity
from {opacity:1;}
to {opacity:0;}
to hide the menu. However this will make it transparent any thing behind would be visible but not clickable. I've not tried what would happen if you add the display:none to the end animation frame.