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.
Related
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
I am looking at the topcoat library and using one of there components; Topcoat Switch.
The example functions fine here:
http://codepen.io/Topcoat/pen/upxds
But in my app I nest the switch in an unordered list and have to apply a background colour to the containing list element for styling purposes. As mimicked here:
http://codepen.io/anon/pen/ekKEc
This crude example masks the text from being visible which is highly undesirable.
Similarly if i apply a background colour to the label element the same issue is evident.
Any help on this would be nice as i spent the last day messing about with z-index etc and just figured out it was the background colour.
Increasing the z-index on the .topcoat-switch class should do the trick.
Check it out: http://codepen.io/anon/pen/vcqGh
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
I have textBox by default it has got background image, now I am able to remove the image on focus using CSS, but once the focus is not there image appears, so how to remove this image when then the box is not empty. I prefer doing this using CSS rather than JavaScript or jQuery.
I know you said you wanted to use css only but I can't think of a way to do this without using either js or doing it serverside with PHP (which is probably not an option)
with jquery you can simply use this check:
if($('#id_of_box').html() == "") { change css here }
You have to combine special CSS Selectors.
CSS 3 includes a ":empty" selector.
http://www.w3schools.com/cssref/css_selectors.asp
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/