span：悬停元素不适用于我的盒子
我的目标是构建一个带有两个选项卡的框，并在用户将鼠标悬停在选项卡上时显示选项卡中的某些文本。对于我的盒子上的选项卡，我在 div 内创建了一个列表。
在“a”标签内，我为我想在不悬停时隐藏的文本添加了一个标签。在我的CSS中，我设置了span{opacity: 0}和span:hover{opacity:1}。文本是隐藏的，但是当我将鼠标悬停在上面时什么也没有发生。
查看小提琴：
http://jsfiddle.net/lamike/74sBm/6/
任何建议？
感谢您的任何反馈
My goal is to build a box with two tabs, and have certain text in the tab show up when a user hovers over the tab. For the tabs on my box, I have made a list inside a div.
Inside the "a" tag I put in a tag for the text I would like hidden when not hovered. In my CSS I set the span{opacity: 0} and span:hover{opacity:1}. The text is hidden, but when I hover over a nothing happens.
Check out the fiddle:
http://jsfiddle.net/lamike/74sBm/6/
Any suggestions?
Thanks for any feedback
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，你的小提琴是错误的 - 你在
span和span:hover中都有opacity: 1。更改它，它就可以正常工作 - X 才会出现，但只有当您将鼠标悬停在包含 X 的span上时才会出现。我猜您希望它在选项卡悬停时随时显示，所以请尝试以下操作：这对我在 FF 有用。
编辑：哦，你真的应该在跨度上使用一个类，而不是将样式应用于所有跨度。
First, your fiddle is wrong - you have
opacity: 1in bothspanandspan:hover. Change that and it works fine - the X appears, but only when you hover over thespancontaining X. I'm guessing you want it to show up any time the tab is hovered, so try this:That works for me in FF.
EDIT: Oh, and you really should use a class on the span, rather than applying the style to all spans.
如果您希望当您悬停选项卡时跨度元素发生变化，那么您需要的是：
If you want your span element to change when you hover the tab, then what you need is this: