jquery - 隐藏某些文本字符串并替换为省略号 - 悬停时显示

Question

我有一个菜单，其中包含我们的客户尚未添加的一些内容，这是一个菜单的示例:

**CLINICAL MATERIALS – NUTRAFUSE**
Clinical Studies & Articles – Coming Soon
Counseling Sheets – Coming Soon
Prescriber’s Guide – Coming Soon
Rx Pads/Order Forms – Coming Soon
Webinars – Coming Soon

我希望它看起来像这样。

**CLINICAL MATERIALS – NUTRAFUSE**
Clinical Studies & Articles...
Counseling Sheets...
Prescriber’s Guide...
Rx Pads/Order Forms...
Webinars...

并在元素悬停时显示原始内容我认为有一种方法可以使用 css 从后面开始截断文本，但我不完全确定。可能需要 jquery。

提前感谢您的帮助!

编辑

如果任何回答的人如果使用 jquery 可能会搞砸，因为我对任何类型的 java 仍然不是那么好

用代码编辑HTML

<div class="widget_nav_menu"><h3>Clinical Materials</h3>
<div class="materials">
<ul class="sub-menu">
<li><a><a>link1</a></li>
<li><a><a>link2 - Coming Soon</a></li>
<li><a><a>link3</a></li>
<li><a><a>link4 - Coming Soon</a></li>
<li><a><a>link5 - Coming Soon</a></li>
<li><a><a>link6 - Coming Soon</a></li>
</ul>
</div>
</div>

没有任何 javascript 或 css 与我需要做的有关

EDIT 针对此问题的更简单的解决方案。我从 wordpress 仪表板的所有菜单项中删除了“- coming soon”，然后使用它在两者之间切换

.coming-soon:after {
content: '...';
}
.coming-soon:hover:after {
content:' - Coming Soon'
}

感谢大家的帮助!

Answer 1

这是你想要做的吗？

https://jsfiddle.net/cshanno/y3kx7dqj/3/

HTML

    <div class="container">
    <h1>**CLINICAL MATERIALS – NUTRAFUSE**</h1>
    <p>Clinical Studies & Articles <span class="comingsoon">...</span></p>
    <p>Counseling Sheets <span class="comingsoon">...</span></p>
    <p>Prescriber’s Guide <span class="comingsoon">...</span></p>
    <p>Rx Pads/Order Forms <span class="comingsoon">...</span></p>
    <p>Webinars <span class="comingsoon">...</span></p>
</div>

JQUERY

$('.container').hover(function(){
    $('.comingsoon').text('- Coming Soon');
}, function(){
    $('.comingsoon').text('...');
});

CSS

.container {
    text-align:center;
    width:500px;
    border: 1px solid black;
}