Is there a way for me to make links clickable both in an overlay DIV and on the surface behind the DIV?
I know about POINTER-EVENTS: None; but it is not a solution in this case because it only makes links clickable on the surface behind the overlay DIV making links in the DIV untouchable.
Sorry if this is a duplicate question.
The property you want here is z-index. Specifically, you want to make it higher on the anchor tags you want to click on than on the header.
First, you'll want to add a class to the anchor tags (let's call it above-header) for specificity, so that the links all look like this:
Link
Then you'll want to add the following CSS to apply the new positioning to the anchor tags:
.above-header {
position: relative;
z-index: 1001;
}
position: relative will make the z-index applicable to those anchor tags without moving them at all, while z-indez will raise them above the header (and make them clickable) as long as their z-index value is larger than that of the header (which is currently 1000).
I would also lower the z-index on .header-area to 1, and then make the z-index on the anchor tags 2, but that's mostly a matter of code style.
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
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
My situation is a bit tricky and hard to explain, hopefully I can do this clearly.
On my website I need it so you click on something and it downloads an image, but the object you click on must allow the :hover psuedo class to change the image on :hover.
How I've set it up is as follows:
http://jsfiddle.net/6NuTv/
If you remove visibility:hidden from the HTML, the image appears and the browsers' download function becomes available.
I can choose which image the img src= is, but adding visibilty:hidden will disable the download ability.
To reiterate - I need it so you you hover over prof_wl_btn and it downloads the <a>'s href=... image and on hover/mouseover prof_wl_btn changes it's background position (so far using psuedo class).
Possible Methods
1: Use javascript onMouseover and Z-Index, but I can't get z-index to work here...
2: I tried using the CSS attribute clip:rect(Xpx,Xpx,Xpx,Xpx); but that crops everything.
If this is unclear I'm sorry, this is hard to explain! I can't find any other post like this.
Ok rewrite, since OP clarified in comments.
You can either have a background image that shifts on :hover, or if the image must be in the HTML then you can indeed move it on :hover of its parent, but if you wanted alt text to always show that won't happen here.
<img src="someiImg" alt="Download ze image, yes">
Make one large image (someImg) showing both states (normal/hover). They can be top bottom or side-to-side. I like top-bottom. Let's say the image you want to show is w 40px by h 40px. Your new sprite image showing both states, if top-bottom, will be w 40px by h 80px;
Set the anchor to block context (display: block, float, whatever).
Set height and width on teh anchor equal to the amount of image you want the viewer to see (so in this case, width and height of the anchor is 40px).
Set anchor to overflow hidden. Now you should only see the 40 x 40 part of the image you want users to see before they do anything.
You can now either set the anchor to position:relative and the img to position: absolute, OR leave them and use negative margins (you'll have to make the img also in block context to do this). Let's say you do the latter:
a img {
display: block;
}
a:hover img, a:focus img {
margin-top: -40px;
}
Because the anchor has overflow hidden, you'll still only see a 40 x 40 window of the image, but now you see the bottom part. As a bonus you get keyboard working there too.
If you want to use positioning, you'd relative-position the anchor, absolute-position the img, set the image in normal state to top: 0 and left: 0, and on hover/focus of the image set top: -40px;
I'm still not totally sure what you mean, but i think you're trying to do this
a img {visibility: hidden;}
a:hover img {visibility: visible;}
but I think the best way would be to set the background image of the link to be the image, then change the background image on hover.
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
Hi Guys i have applied Relative positioning to the image as the above screen cap . but what i required is to take this image to front of that gray menu bar . what should i apply for menu's CSS class to do that ?
for relative position of the image i used the following code
position: relative;
top: -Xpx;
z-index: 99;
z-index:999;
or some other really high number to force it above all other elements.
Relative position is given to an element when you want to anchor (contain) other positioned elements inside it. If you want that image to appear on top of everything else you need to position it absolute. This, of course, depends on what it is you are trying to achieve.
Without seeing the html and the full css this is my best guess: You need to set the gray bar to a position:whatever and then set the z-index on that one as well.
I think you are applying the css style before the styling of the gray bar.
So you should apply the css styles on the image after the gray bar style or code.