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
Related
I have an element (the green color in image)
it has a property
top:-5vw;
Because of this it covers the link in text (1.5% /year) and makes it unclickable.
How do I make it clickable without replacing anything?
I tried using z-index, but that does not work.
Image is of inspect element, so blue colour is region of 2nd element
You can try to use pointer-events: none; on div or use negative z-index like z-index:-1.
z-index is what you are looking for. Z-index has certain things that stop it from acting the way you want it to. common mistakes are setting the position. make sure your positions are not set to static or absolute
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 wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
I have two divs. I would like to position one div over the other and have it appear over it. I am able to position the div but how can I make it such that background of the div is not visible or should I control the background visibility.
....
...
You should use background color and you can do one more thing that is while showing the upper div reduce the opacity of below div or just hide it or you can make overlay on which put the upper div so background div will not be visible. So many ways are already present to do such thing it depends upon you need.
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/