0

我正在尝试制作双翻转链接。滚动“照片”时；我想让'fotografie'出现，'grafisch'消失（同样的事情：滚动grafisch时，'foto'消失）。我发现使用 opactiy 最简单，但我似乎无法弄清楚代码。

任何帮助高度赞赏。

HTML

<a class="fotografie" href="URL">
<div class="foto">foto</div>
<div class="fotografieh">fotografie</div>
</a><a class="grafischontwerp" href="URL2">
<div class="grafisch">grafisch</div>
<div class="grafischontwerph">grafisch ontwerp</div>
</a>

CSS

.masterplan .fotografie {color: #ff6666;}
.masterplan .fotografie .fotografieh { display: none; }
.masterplan .fotografie:hover .foto { display: none; }
.masterplan .fotografie:hover .fotografieh { display: inline;}
.masterplan .grafischontwerp {color: #33cccc; }
.masterplan .grafischontwerp .grafischontwerph { display: none; }
.masterplan .grafischontwerp:hover .grafisch { display: none; }
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}
4

1 回答 1

1

仅使用 CSS 没有简单的答案，我建议添加简单的几行 jQuery：

$(document).ready(function() {

    $(".foto").hover( function() { // Assign 'hover' action to all elements with 'foto' class
        $(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class
    });
    $(".grafisch").hover( function() {
        $(".foto").toggle();
    });
    /* insert other jQuery code, if any */
    ...
});

如果您使用的是 jQuery，我希望这会有所帮助。

编辑：

Michael，我怀疑你可能不熟悉 JavaScript/jQuery。网络上有大量示例和教程，您可以轻松找到。另外，一定要搜索 StackOverflow。

如果您希望继续使用 html 和 css，我建议您至少学习 JavaScript 和 jQuery 背后的基本概念，这是使用最广泛的 JavaScript 框架/库之一。

为了帮助您入门，请查看以下链接：

请注意，我还在之前编写的代码中添加了一些注释。如果您对此主题有任何其他问题，请告诉我。

看看这个演示 -->演示

于 2013-10-13T15:31:16.030 回答