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...
Related
How to type into a text box or click a button ,which has a overlaying div. I need to access the text box even though there is a div or image over it.Please help.
Try this:
pointer-events: none;
This will make any mouse event "fall through" the element.
Note: however, that this will be applied to all child elements too, so
any element you might want to click (a link or so) will be
inaccessible.
I'm working on a website and was looking for a function that lets me hover a div to scroll right inside another div, like this example:
See: http://jsfiddle.net/s17L50pv/1/
Imagine that the arrow > to the right is the div you hover and the content in #slider moves right, showing more books!
You need to use setInterval() and some events (mouseover and mouseout) to get this effect
See if that's what You are talking about - http://jsfiddle.net/s17L50pv/5/
I suggest you use a javascript carousel slider for this, there are tons of free scripts around, e.g:
http://kenwheeler.github.io/slick/
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.
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
Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?
#thirtydot If you know of a solution
that works in only one browser I still
would love to here it! Although the
more support the better.
You can use pointer-events: none.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
http://jsfiddle.net/QC5Yw/
Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.
http://www.w3schools.com/Css/css_image_transparency.asp
No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it.
Thats why you can put a completely empty div with fixed with and height and it will be clickable.