Is a rollover on a lightbox close (X) button possible? - wordpress

I've tried the traditional Javascript rollover method and CSS background switching method, but nothing seems to work -- apparently when you're hovering over the close button you're actually...not.
Using Lightbox Gallery plugin in Wordpress.
Any suggestions?
Have a good one,
Andrew

button you're actually...not.
Indeed, You're actually hovering the whole picture (except the right and left third which is for next/prev button).
Try using FireBug, Use it and you'll know what are you really hovering over.

Related

nz-popover - nzPopoverPlacement, target another element for centering

I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.

CSS Focus Dropdown menu disappears when clicking child li

I am having problems with my drop down menu. When I try to click on one of the links in the sub-menu, focus is lost from the parent and so the menu disappears, making it impossible to follow the links in the sub-menu. I have searched this forum and google and although there are many similar issues, I can't find any solutions to my particular problem. I would greatly appreciate any help on this. The site is www.emmatuscaloosa.com and the sub-menu is under the "categories" button.
Dont display the sub-menu none.. rather hide it with opacity.
I worked out a pretty simple fix for this by adding some CSS to the sub menu hover state. Im hiding / showing the sub menu using the max-height property and fixed the issue by writing:
.sub-menu:hover {
max-height:100%
}
That simple! Whenever the mouse is hovering on any sub menu item the menu must stay visible, allowing enough time to click on the enclosed links. Not sure if this is the "proper" way to fix the issue but it's working like a charm.
Dont' use focus. There are other ways, for example you could use :target or :hover to open the submenu. Using target, you will have to add an id to the submenu.
Target:
.sub-menu{display:none;}
#categories:target{display:block}
Another way is to use Javascript.

CSS only menu close on :target

I am using a drop-down menu written in CSS. Been able to get it to my liking but one thing seems to elude me. I want the drop-down menu to close upon mouse click on an item. Fiddling around with :target for some time, just cannot make it work.
http://www.jsfiddle.net/DAtLC/

CSS Submenu Disappearing too quickly

I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.

css sprite button is jumping around

Does anyone know what is causing the sprite rollover to jump around
It is I think more likely a photoshop question, but I am not completely sure.
I hope to get an answer here anyway, since I think most webdesigners/programmers problably worked with photoshop also.
This is what I want the rollover to do example 1
and this is my testpage (see the play button)
I made the sprite with spriteme.com
thanks, Richard
I do not see anything jumping around. However, when I first open the page the Play button is missing (its style is set to display: none;). When I click stop it appears, and then disappears when I click play. This is due to it's inline "display" style being set to block and none.
Is this your problem?
Note: I tested in Chrome and FF. I debugged the CSS states using Firebug.

Resources