How can I get the photo to continue to show when the fancybox next and prev arrows are showing?

Question

I'm using the fancybox jQuery plugin for my photo gallery site. Fancybox works well, however when you hover over the left third of the image, only the back arrow shows (the left third of the photo disappears); the analagous thing happens with the right third of the image. How can I fix this? There doesn't seem to be any fancybox property that controls this...

This is the jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs();
        $(".fancybox").fancybox();
    });
</script>

...and the html is all like this:

<a class="fancybox" rel="group" href="Images/Fullsize/Verticals/V_Winter_2013 02 02_1928.jpg">
    <img src="Images/Thumbnails/Verticals/V_Winter_2013 02 02_1928_th.jpg" width="144" height="216" alt="Garrapata" /></a>

I have no custom CSS - the only CSS referenced is:

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../fancybox/jquery.fancybox.css" type="text/css" media="screen" />

UPDATE

I can't check it right now, because Visual Studio is updating (Update 2), but I found these potential culprits in Site.css, which is auto-generated by WebMatrix and/or Visual Studio (Microsoft, IOW).

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

So it would seem MS is using the buckshot approach with a:link and indirectly causing this problem.

Also, screen.css has:

a:hover {
  color: #589e29;
}

So I don't know which, if any, of these is the cause of the problem yet...

Answer 1

Generally speaking, is not a good idea to apply CSS declarations to global elements like

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

because they will affect to all present and future elements that can be added by an specific plugin (like fancybox in your case). The use of specificity is recommended instead like :

#myWrapper a:link, #myWrapper a:visited,
#myWrapper a:active, #myWrapper a:hover {
    color: #333;
}

#myWrapper a:hover {
    background-color: #c7d1d6;
}

In your case, this declaration :

a:hover {
    background-color: #c7d1d6;
}

... is causing the colored background when you hover the prev/next navigation buttons because, they are also links.

What you can do is to refer to the highest parent container for specificity purposes.