Question

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

任何帮助都非常感谢。

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

Answer 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，我希望有所帮助。

编辑：

迈克尔，我怀疑你可能不熟悉JavaScript / jQuery。您可以轻松找到大量的网络示例和教程。此外，请务必搜索StackOverflow。

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

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

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

查看此演示 - ＆gt; DEMO

开：在css的其他级别悬停不透明度0.0

1 个答案: