0

フォト ギャラリー サイトに fancybox jQuery プラグインを使用しています。Fancybox はうまく機能しますが 、画像の左 3 分の 1 にカーソルを合わせると、戻る矢印だけが表示されます (写真の左 3 分の 1 が消えます)。画像の右 3 分の 1 で同様のことが起こります。どうすればこれを修正できますか? これを制御するファンシーボックスのプロパティはないようです...

これは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" />

マウスを画像の左 3 分の 1 に置くと、下にある画像の 3 分の 1 が非表示になり、矢印のみが表示されます。

アップデート

Visual Studio が更新中 (Update 2) であるため、今は確認できませんが、WebMatrix および/または Visual Studio (Microsoft、IOW) によって自動生成される Site.css にこれらの潜在的な原因が見つかりました。

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

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

そのため、MS は a:link を使用したバックショット アプローチを使用しており、間接的にこの問題を引き起こしているようです。

また、screen.css には以下があります。

a:hover {
  color: #589e29;
}

したがって、これらのうちどれが問題の原因であるかはまだわかりません...

4

2 に答える 2

1

aカスタムボックスとファンシーボックスの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;
}
于 2013-05-01T19:46:54.683 に答える