Currently my dilemma is that I have a div positioned absolute sitting on top of all my code (it has a sliding animation) however I now cannot access the content behind the top div..
This has the animation, but no links or buttons will work: http://oxygenrad.io/index.php
This is without the animated div and has the working links and buttons: http://oxygenrad.io/index-2.php
The div that's causing all of my issues is the following:
<div class="reveal open">
</div>
I understand that I could just destroy the div after :XX seconds, but ideally I was wondering if there was a better solution? All I want to be able to do is click through the div.
Use pointer-events: none; on your div as follows :
.opened {
background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px;
pointer-events: none;
background-repeat: no-repeat;
}
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
For IE11 you can use :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
You can try with pointer-events: none (see mdn page for details). But be aware that it will not work with IE < 11.
Instead of pointer-events: none; as some have suggested, just add z-index:0; to your .opened class. Works in all legacy browsers, whereas pointer-events does not.
Related
On the following page, http://duncanmorley.com/ there are the following issues:
One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")
It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.
I believe these issues are likely the result of one problem.
text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.
Fix for the Facebook share button (an example)
Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>
Now you can style the text the sr-only way:
.hide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.
Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.
I'm designing a clickable panel for an html app which contains multiple text elements and images.
From what I understand this is generally done with a div. Something like this:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In this example I'm trying to do a css animation (IE only) but this could really be anything.
The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.
Here is a JS Fiddle to show the scenario:
http://jsfiddle.net/S9JrH/13/
UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.
Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.
Does anyone know how to get this working properly in IE10?
Currently not possible (I think)
From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.
Fiddle: http://jsfiddle.net/jonathansampson/UrN39/
Workaround
The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});
Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.
Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/
Why don't you use HTML <button> element. It's created for your case. Div doesn't take focus, while button gets.
You can use the CSS pointer-events: none; on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.
I overlay the the element using :after so that children are not clickable.
.myButton:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
.myButton:active, .myButton *:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.
Anyone know of a way to get the zOrder to work differently for visual vs mouse events?
I have a <div> element that I am placing higher in the zOrder which is slightly transparent to highlight something but it is interfering with a :hover css style over the original element.
I either need to make the <div> invisible to the mouse or have it's mouse zOrder different from it's visual zOrder. This would be in HTML, never heard of anything that would allow this, anyone else hear anything?
I guess I'm not sure why a sample would be needed for this but it would be something like this:
<style>
#a1:hover {
background-color: red;
}
#c1 {
position: absolute;
z-index: 10;
width: 100px;
height: 100px;
opacity: 0.3;
background-color: green;
}
</style>
<div id="a1">
<span id="b1">Sample</span>
</div>
<div id="c1"> </div>
The above sample probably only serves to complicate the question, however the div#c1 is position over the rest of the elements in a higher z-order with a transparent green color.
I would like the div#a1:hover css style to still have effect when the mouse is over the a1, in the above example the div#c1 is also in the same position and so it receives the :hover effect (if there were one). I would like to have div#c1 to have a different mouse z-order such that mouse events 'pass through' it to the underlying elements (causing the a1:hover to occur)
[I need] to make the <div> invisible to the mouse
overlay on clickable region - CSS
How to make an element transparent to clicks but still visible?
You can use pointer-events:
none.
It works "everywhere" (Chrome,
Firefox, Safari) except Internet
Explorer (and Opera, if that matters).
http://jsfiddle.net/QC5Yw/
In the likely case that the browser support for pointer-events isn't acceptable, you'll have to use JavaScript.
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.