Question

I’ve installed an unmolested version of Fancybox 2 on a site I’m building – it all works fine apart from when hovering over the previous, next and close areas a black background appears over the image.

The only modifications I have made to the standard Fancybox are controls for the fadein speeds etc

You can see the page here

If you click on any of the images, the you will see the issue when hovering over the next / prev / close buttons.

I’ve used this on another site and haven’t had this problem, so can’t see what the issue is.

Any help much appreciated.

Answer 1

Well, it’s not a fancybox error but a user-generated behavior.

That black area is actually a link within fancybox to move to the next/prev elements of the gallery and becomes black because you have this CSS rule (line 25) in your style.css file :

a:link {
    color: #000000;
    text-decoration: none;
}

Generally speaking it’s not a good idea to apply general CSS rules to tag elements because they will affect the whole site (as it does in this case), use specificity instead like :

#parent_container a:link {
    color: #000000;
    text-decoration: none;
}

or

a.this_class:link {
    color: #000000;
    text-decoration: none;
}