take look at this:
http://www.templatemonster.com/demo/35403.html
In this template you can click on the image under the man's forearm even over the forearm itself.
The hand is not a part of images. It is three div pieces that has a png image as background.
How is it possible?
How Can I do the same thing (have a div that contains a linked image and have another div on it but the underlying link be clickable)?
Is it cross-browser?
Thanks
You could just add pointer-events:none in your stylesheet to the element you're trying to click through
Example here: http://robertnyman.com/css3/pointer-events/pointer-events.html
Check the checkbox to see how the grey box is able to be clicked through.
it's made with
pointer-events:none;
it don't works in IE and Opera, but that is in this case not really a problem. It just don't work over the arm itself.
In modern browsers you can use the pointer-events css3 property. Here is a famous question about this : Click through a DIV to underlying elements
Related
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
I'm trying to implement a linear-gradient on the html tag so that when the user overscrolls it will appear.
I can apply css background-color to the html element to allow the colors to appear like they extend above and below our page to make overscrolling less jarring or 'native.' This is sometimes referred to as 'rubber banding.'
A great example of what I mean can be found on Peter Ramsing's site. His example is below:
However, background-color seems to be the only property that works like this. Here is an example of the difference in behaviour between background-color and background-image (linear-gradient) - apologies for the gif quality:
You can find the markup to replicate the issue on codepen - this cannot be replicated within codepen itself unless on debug mode so I suggest forking this link to test.
It would be nice to have the option to have any background property extend and take rubber banding into account. I don't think there's a work around for this so I'm looking to see if anyone would know as to why Chrome team have not included this as a feature?
If no one knows as to why I'm going to submit a bug/feature request for this.
When setting a background to the html, it will be applied on all four borders. If you just want to have a background-color on e.g. the top site, add a div element above your page:
<div style="height:1000px;background:#00BD9C;margin-top:-1000px;position:fixed;width:100%;"></div>
By that, the overflow color will just be applied on the top side. Depending on the background configuration of your inserted div, you can make there also gradients or insert an image that will be shown on overscroll.
I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.