我正在尝试建立一个双重过渡链接。
滚动“ foto”时；我想使“ fotografie”出现而“ 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;}
最佳答案
仅使用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背后的基本概念，这是使用最广泛的JavaScript框架/库之一。
要开始使用，请查看以下链接：
Setting up jQuery
How jQuery Works
请注意，我还在我先前编写的代码中添加了一些注释。如果您对此主题还有其他疑问，请告诉我。
查看此演示-> DEMO