This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 7 years ago.
Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.
I've tried background: url('...') transparent, but to no avail.
Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).
I've fixed your problem by adding pointer-events: none; to the absolute block.
body {
margin: 0;
padding-left: 10px;
font: 20px Arial, sans-serif;
line-height: 30px;
}
a:hover {
color: red;
}
#overlay-blocking,
#overlay-passing{
position: absolute;
height: 30px;
width: 10em;
left: 0;
}
#overlay-blocking {
top: 30px;
background: rgba(0,100,0, .2);
pointer-events: none;
}
#overlay-passing {
top: 0;
background: rgba(100,0,0, .2);
}
Link blocked<br>
Link available<br>
Link available<br>
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.
OTHER OPTION
You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.
Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?
Related
I have a fixed position element at the bottom of the page bottom: 0 with a background colour of black. It's a navigation element that has things scrolling behind it.
I'm trying to do a stained glass effect using backdrop-filter: blur(20px) so I need to change the opacity of the background-color: rgba(18,18,18,0.3).
When I add the filter change, the fixed element goes up 1px, which means I can see a pixel of the things scrolling at the bottom of the page.
Why is this happening?
What can I do to prevent/fix this?
Thanks in advance!
.myDialog {
padding: 5px 10px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(20px);
position: fixed;
bottom: 0;
}
body {
background: green;
}
<div class="myDialog">
I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aksldjnaskjdnaksjdnakjsdnakjnsdkajsndakjsndkajsndkjasndkjasndkjandkjanskdjnaskdjnaskjdnakjsdnakjsndkajndkjasndkjansd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(there's a piece of text that when you scroll through, you see it behind the fixed box).
https://jsfiddle.net/379heofx/2/ (in case code above doesn't show, which boggles my mind even further)
screenshot of issue:
You can try and use the opacity keyword instead.
So like this:
yourelement {
background-color: black;
opacity: 0.3
}
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I have a problem with an link's background.
For my exam this must work on all browsers down to IE 6. Problem is I am using a background image that should be positioned on the left of the links, but if the link is longer than one line IE 6 gets confused and positions the background image centered left, not top left...
I am using a 2colors .gif image and the anchor tag is located as follows
<style>
#right-menu {
float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
padding: 15px 20px;
background-color: #f6f6f6; min-height: 715px;
}
#right-menu .title {
font-size: 1.5em; color: #4a493f; font-weight: bold;
}
#right-menu a {
color: #4b4a41; font-size: 1em; padding-left: 15px;
background: url(../assets/bullet2.gif) left no-repeat;
display: inline;
}
</style>
<div id = "right-menu">
<h3 class = "title">
recent comments
</h3>
<ul>
<li>
<a href = '#' title = 'title'>
Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
</a>
</li>
...
</ul>
</div>
If it cannot be done I will still appreciate someone stopping me from trying again and again.
Thank you for your time!
According to this article, several versions of IE just don't do the right things when rendering background images on multiline inline elements. There are several possible work-around mentioned in the article. The simplest looks to be using inline-block as the display style, but you can see the other work-arounds in the article.
There is also plenty written on the web about this issue so with the right Google search ("inline element background image"), you can find many other articles.
You also may want to make sure a background image is top/left by specifying both top and left:
You have this:
background: url(../assets/bullet2.gif) left no-repeat;
Might as well use this:
background: url(../assets/bullet2.gif) left top no-repeat;
It looks like top/left is supposed to be the default, but it doesn't hurt to specify what you want.