CSS，悬停在一个元素上，影响另一个元素

Question

当我悬停在“li a”时，我能用纯CSS影响另一个元素吗？

因为我试图让一个框作为背景元素滑入，当我悬停在链接上时。 就像这个网站的导航栏一样，但不是在激活时，而是在悬停时发生。 http://www.zindhai.com 这是我的代码。

nav ul li a:hover{
    color: #C3E1FF;
    font-weight: 700;
}

nav ul li span:hover{
    -webkit-transform:translate(0px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

nav ul li span{
    height:43px;
    width:300px;
    position: absolute;
    background-color:#47525D;
    -webkit-transform:translate(300px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
    background-position:initial initial;
    background-repeat:initial initial;
}

感谢您提前的支持！

这是当前的页面样式； http://jsfiddle.net/mbyc3tf9/

- Tobias Madsen

---

同时提供HTML，并制作http://jsfiddle.net。 - GramThanos

请查看如何制作一个最小化、完整化、可验证的问题示例（MCVE）的说明：http://stackoverflow.com/help/mcve - i alarmed alien

jsfiddle.net 已添加 :) 请看一下 - Tobias Madsen

http://jsfiddle.net/victor_007/mbyc3tf9/1/ 我已经添加了一个子菜单，当你在 li 上悬停时，它会显示子 li。 - Vitorino fernandes

好的，但这不是我的问题，我需要在悬停在li上时将右侧的框滑入。 - Tobias Madsen

可能是重复的问题：如何在鼠标悬停在一个 div 上时影响其他元素。 - kittykittybangbang

Answer 1

如果你需要移动span，当你将鼠标放在a上时，请添加以下内容：

nav ul li a:hover > span {}

- Javier

---

谢谢！它可以工作了，但现在我的悬停效果消失了？ - Tobias Madsen

你需要添加 nav ul li a:hover {} 和 nav ul li a:hover > span {}。 - Javier

谢谢！它完美地运行了 :) 实际上，如果您有时间，我需要帮助另一个问题，您知道如何隐藏span，使其仅在悬停li时出现。因为现在它在li的右侧可见。 - Tobias Madsen

是的，它起作用了，尽管“动画”消失了，所以这个跨度不会从侧面滑入，它只是出现了 :/ - Tobias Madsen

你需要在导航栏的 "nav ul li a:hover > span" 中添加动画代码。 - Javier

Answer 2

是的，这很容易做到。假设你的HTML被称为.myElement之类的东西。你需要做的就是...

nav ul li a:hover .myElement { ... }

然后在{ }中输入你的CSS。

- Dan

---

你能举一个以上面我提供的代码为例子吗？ 我已经尝试了几种方法，但它们都没有起作用。 - Tobias Madsen

我在我的CSS中遇到了类似的问题。 - Tyler Lazenby