Question

对于我一直在建设的双语网站，我希望在点击链接之前将某些菜单链接显示在链接上显示英文翻译。

我知道可以用css中的before和after值来完成，但到目前为止，我已经不成功了。

这里有一点css

gulp.watch('src/data/**/*.json').on('change', gulp.series(resetPages, pages, inline, browser.reload));

这是引起问题的html。似乎有太多的课程互相争斗，但禁用它们并不是一个真正的选择。

#navmenu {
    font-family:'Sugo';
    letter-spacing:1px;
    font-size:2em;
    text-transform: uppercase;
    text-align:center;
    position: relative;
}

#navmenu ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none; 
}

#navmenu li {
    display:inline;
}

#navmenu li a {
    text-decoration: none;
    display:inline-block;
    width: 4em;
}

#navmenu li a:hover{
    color: #fff;
}

#navmenu li:nth-child(1) a:hover {
    background: #ffa83c;
}

#navmenu li:nth-child(2) a:hover {
    background: #ffa83c;
}

#navmenu li:nth-child(3) a:hover {
    background: #ffa83c;
}

#navmenu li:nth-child(5) a:hover {
    background: #ffa83c;
}

#navmenu li:nth-child(6) a:hover {
    background: #ffa83c;
}

#navmenu li:nth-child(7) a:hover {
    background: #ffa83c;
}

理想情况下，例如，＆＃34; zoek＆＃34;应转换为＆＃34;搜索＆＃34;在盘旋时，同样的妆容。

有任何想法如何解决这个问题？

Answer 1

我会将文本放在<span>zoek</span>中，而英文文本也会放在英语课程中。或者您希望表明您想要显示该文本的任何课程。

用英语类隐藏范围。当您将鼠标悬停在<a>上隐藏跨度，但会显示英文文本。

示例：https://jsfiddle.net/wn0Ld47e/（将鼠标悬停在＆＃34; zoek＆＃34;）

Navmenu在悬停时用css显示不同的文本

1 个答案: