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" />

With the mouse on the left third of the image, it hides the underlying third of the image, and only shows the arrow

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...

Can you post a screenshot or something please? It's quite difficult to understand what you're trying to say in the question. — Chamara Keragala, Apr 29 '13 at 03:47
sounds like `.fancybox-left` and `.fancybox-right` links are picking up a background colour on hover somewhere in your CSS. It would normally be transparent — thefrontender, Apr 29 '13 at 03:54
For sure you have a css declaration somewhere in your(s) other css files similar to : `a:hover {background : #aaffaa;}`. Generally speaking is not a good idea to apply styles to general elements but use specificity instead like `#myWrapper a:hover {background : #aaffaa;}` — JFK, Apr 29 '13 at 07:09
possible duplicate of [Fancybox error: prev and next areas have black background on hover](http://stackoverflow.com/questions/12626689/fancybox-error-prev-and-next-areas-have-black-background-on-hover) — JFK, Apr 29 '13 at 07:15
this color `#c7d1d6` is exactly the one on hover in your screenshot so is the second css declaration. You can always write an extra css to override those "generated" declarations, just upload it after them. — JFK, Apr 30 '13 at 04:56
Interesting; I'll czech that out. I tried taking out the a:hover in Site.css, and that solved nothing, so I'll delve into this next. — B. Clay Shannon-B. Crow Raven, May 01 '13 at 02:07
My bad; I took it out but failed to close Site.css, saving the changes, thus the change didn't take effect. I would have thought all changes, even to *.css files, would have been saved on running the project. If you make this an answer, I'll mark it as such, and bountify it, too. — B. Clay Shannon-B. Crow Raven, May 01 '13 at 02:35
I hope I don't find that I "need" that "a:hover { background-color: #c7d1d6; }" somewhere else... apparently the defaults of Razor2 projects and fancyBox mix about as well as oil and vinegar. — B. Clay Shannon-B. Crow Raven, May 01 '13 at 02:40

zelibobla · Answer 1 · 2013-05-02T06:59:20.880

It looks like you have CSS rules conflict between your custom a and fancybox a displaying. The best way to solve this is to inspect your custom /Content/Site.css and replace yours

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

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

by something like this:

.content a:link, a:visited,
a:active {
    color: #333;
}
.content a:hover {
    background-color: #c7d1d6;
}

Here I suggest to you to clarify some container where you need your anchors to be shown as you need.

Another solution is to write in a bottom of your css:

.fancybox-left, .fancybox-right{
  background: none !important;
}

JFK had the answer; I'm just waiting for him to make it an answer insttead of a comment; thanks! — B. Clay Shannon-B. Crow Raven, May 01 '13 at 21:56

score 1 · Accepted Answer · answered May 02 '13 at 18:00

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.

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

UPDATE

2 Answers2