如何在下一个fancybox和prev箭头显示时让照片继续显示？

Question

我正在为我的照片库网站使用fancybox jQuery插件。 Fancybox运行良好，然而当你将鼠标悬停在图像的左三分之一上时，只有后退箭头显示（照片的左三分之一消失）;同样的事情发生在图像的右三分之一处。我怎样才能解决这个问题？似乎没有任何fancybox属性可以控制这个......

这是jQuery：

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

...而html就像这样：

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

我没有自定义CSS - 唯一引用的CSS是：

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

更新

我现在无法检查，因为Visual Studio正在更新（Update 2），但我在Site.css中发现了这些潜在的罪魁祸首，这是由WebMatrix和/或Visual Studio（Microsoft，IOW）自动生成的。

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

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

因此，似乎MS正在使用带有：link的buckshot方法并间接导致此问题。

另外，screen.css有：

a:hover {
  color: #589e29;
}

所以我不知道这些问题中哪些是问题...

Answer 1

您的自定义a和fancybox a显示之间似乎存在CSS规则冲突。解决此问题的最佳方法是检查您的自定义/Content/Site.css并替换您的

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

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

通过以下方式：

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

在这里，我建议您澄清一些容器，您需要根据需要显示锚点。

另一个解决方案是写在你的CSS的底部：

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

Answer 2

一般来说，将CSS声明应用于全局元素不是一个好主意

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

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

因为它们会影响可以由特定插件添加的所有现在和将来的元素（例如您的情况下的fancybox）。建议使用特异性，如：

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

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

在您的情况下，此声明：

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

...当您悬停prev/next导航按钮时会导致彩色背景，因为它们也是链接。

您可以做的是为了特殊目的而引用最高的父容器。