http://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery
In this link, there is the markup for a gallery. If you hover over the thumbnail, the picture appears. If you click the thumbnail, the image will stay (otherwise it disappears). If you click anywhere outside of the thumbnail, the image disappears.
My question, what would have to be done to prevent the image from disappearing if you click somewhere on the page outside of the image/thumbnail? I want the image to stay once you click the thumbnail no matter where you click (unless you click another thumbnail for a new image).
I have very little experience with coding so help would be much appreciated. Also, it is necessary for me to use this exact gallery.
Thank you!
You cannot do this with CSS, because CSS cannot tell the difference between an item you have never hovered over and one you have finished hovering over. It only detects states, such as "not currently hovered over". So you have to use Javascript. With jQuery it looks like
$("dt").on("mouseover", function() {
// Hide other images only when we want to show a new one.
$("dd").css("opacity", 0);
$(this).next().css("opacity", 1);
});
Working JSFiddle
Related
Is there a way to add additional code to the slides widget so that the grabbing hand turns into the default mouse cursor? I only have text in the slides widget which pops up through autoplay, and do not want visitors to be able to swipe through the slides. Thanks in advance!
I tried code that turns the cursor from a hand to an arrow when hovering over images, but that did not work. Apologies, but I am not able to try much code as I am not experienced in code.
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
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.
I'm having some issues with the Facebook Like and Send button.
I'm using XFBML for the buttons, in Wordpress, Blogum theme.
But the problem is that when the Like or Send button is clicked, the flyout where you can give reactions and so on, disappears under other objects on the site.
To check it all out for yourself, see:
http://zephyrhet4e.nl/2012/06/frisse-wind/
at the bottom of the post we have the Like and Send buttons.
I would like to see that the flyout goes above all the other content on the webpage.
Is somebody able to help me with this problem? Thanks a lot!
The .post_content class in style.css line 80 has overflow:hidden. Because your Facebook buttons are at the very bottom of your post content div, it is hiding them when they overflow its borders. Change this to overflow:visible and the Facebook flyouts will be visible (though you may need to check that this doesn't affect other site elements).
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.