Html CSS:hover-如何使文本上的悬停影响图像？

我有一个图像导航菜单，我用CSS转换和不透明度在图像上设置了鼠标悬停发光效果的动画。出于SEO目的，我希望导航菜单包含文本链接

辉光效果是使用CSS背景图像和html前景图像完成的。将鼠标悬停在前景图像的不透明度上时，前景图像的不透明度慢慢变为0，显示下面的背景图像

我已经解决了如何将文本定位在图像上，使用position:relative表示父div，position:absolute表示p。但是，当鼠标悬停在文本上时，它不再被视为悬停在图像上，因为文本位于图像的顶部。因此，辉光效果不起作用

在flash中，很容易让鼠标移到一个对象上，从而引起另一个对象的变化。在CSS中有什么方法可以做到这一点吗？如果不是，那么javascript能做我需要的吗

编辑

谢谢你的回复。这是代码。抱歉，如果它太乱了，我已经好几年没有做过任何HTML编码了，也从来没有使用过CSS

到目前为止，我只在第一个按钮上添加了文本和链接

编辑2

---

好的，我制作了一把小提琴，使它更容易理解：

---

正如您所见，当鼠标位于文本上方时，图像不会褪色。

您是否尝试过类似的操作？：

.textThatIwantToHover:hover, .imageThatIwantToAffect:hover{
    //some css
}

---

你试过这样的东西吗

.textThatIwantToHover:hover, .imageThatIwantToAffect:hover{
    //some css
}

---

基于您最新的问题和小提琴感谢小提琴！这里有一个解决方案：

只需简单地调整CSS选择器即可：

更改：img.navbutton:悬停{

To:a：悬停img.navbutton{

我会尽力解释，但可能做得不好

如果元素是兄弟元素，例如

<img />
<p>Text</p>

这个概念是，你有一个链接，里面有一个图像和一些文本。在这个例子中，我使用了标签，并简单地用红色背景和固定的宽度/高度设置了它们的样式

然后，我将标签绝对定位在图像上

悬停时，我调整标记的左位置，而不是颜色

为了简单起见，我简化了本例中的代码

您只需使用：hover伪类将父标记作为目标，并在本例中选择要设置样式的子元素

然而，我觉得CSS/HTML中有更多令人不安的东西，但这是为了表明你可以做你想做的事情，改变链接子元素的样式

如果你发布真实代码，我可以查看并调整我的答案

我希望这有帮助

---

干杯！

基于您更新的问题和提琴感谢您的提琴！这里有一个解决方案：

只需简单地调整CSS选择器即可：

更改：img.navbutton:悬停{

To:a：悬停img.navbutton{

我会尽力解释，但可能做得不好

如果元素是兄弟元素，例如

<img />
<p>Text</p>

这个概念是，你有一个链接，里面有一个图像和一些文本。在这个例子中，我使用了标签，并简单地用红色背景和固定的宽度/高度设置了它们的样式

然后，我将标签绝对定位在图像上

悬停时，我调整标记的左位置，而不是颜色

为了简单起见，我简化了本例中的代码

您只需使用：hover伪类将父标记作为目标，并在本例中选择要设置样式的子元素

然而，我觉得CSS/HTML中有更多令人不安的东西，但这是为了表明你可以做你想做的事情，改变链接子元素的样式

如果你发布真实代码，我可以查看并调整我的答案

我希望这有帮助

---

干杯！

嗨，克里斯，发布CSS/HTML对你真的很有帮助。如果你简单地把它放在小提琴上，它会更有用。通过这样做，会员们可以方便地查看你的代码，根据需要进行调整，并帮你指出任何问题。在SO中，我们使用粘贴HTML和CSS，在与L&F有关的问题中，也可以使用JSFIDLE或Tinkerbin或Liveweave链接。阅读纯文本很难想象你的问题。如果你的分组DIV元素同时包含P元素和图像，那么你为什么不将格式应用于：悬停在DIV元素上…？@CBrow-那么我不需要为每个按钮单独设置一个DIV吗？我宁愿将它们保留为al如果可能的话，我也会在同一个分区中。因此，我认为文本会随着按钮淡出。嗨，克里斯，发布CSS/HTML对你真的很有帮助。如果你只是把它放在小提琴里，它会更有用。通过这样做，成员们可以很容易地查看你的代码，根据需要进行调整，并帮助指出任何问题。在这里，我们使用aste html和CSS——在与L&F有关的问题中，还有JSFIDLE、Tinkerbin或Liveweave链接。人们很难通过阅读纯文本来想象你的问题。

---

---

。如果您的分组DIV元素同时包含P元素和图像–那么为什么不将格式应用于：悬停在DIV元素上…？@CBrow–那么我不需要为每个按钮单独设置一个DIV吗？如果可能的话，我宁愿把它们都放在同一个分区中。因此，我认为文本会随着按钮而淡出，那么这不会使文本和图像一样淡出吗？谢谢你的回复。没有逗号就没有任何效果。使用逗号只会导致文本消失，对图像没有影响。好的，我创建了一个小提琴，使其更容易理解：正如你所看到的，当鼠标移到文本上时，图像不会褪色。这不会使文本和图像一样褪色吗？谢谢你的回复。没有逗号就没有任何效果。使用逗号只会导致文本消失，对图像没有影响。好的，我创建了一个提琴，使其更容易理解：正如你所看到的，当鼠标移到文本上时，图像不会褪色。好的，我创建了提琴，使其更容易理解：正如你所看到的，当鼠标移到文本上时，图像不会褪色。嗨，克里斯，谢谢你的小提琴！问题似乎是：悬停在而不是上。正确的做法是，img在文本上方不会褪色。如果将：悬停移动到应该工作的父对象上触发。我在摆弄你的小提琴。天哪，这比我想象的容易多了。这就像更改选择器一样简单：img.navbutton:hover{to=>a:hover img.navbutton{谢谢你的帮助！效果非常好：-好的，我创建了fiddle使它更容易理解：正如你所看到的，当鼠标在文本上时图像不会褪色嗨，Chris，谢谢你的fiddle！问题似乎是：悬停在文本上，而不是文本上。正确的是，img在文本上不会褪色。如果你移动e:悬停以触发应该可以工作的父对象。我正在摆弄你的小提琴。孩子，这比我想象的要容易得多。只需更改选择器即可：img.navbutton:hover{to=>a:hover img.navbutton{谢谢你的帮助！工作完美：-

<a>
    <img />
    <p>Text</p>
</a>

<li id="a"><a href="#"><img /><b>Ahy!</b></a></li>

li a:hover b{
    left:45px;
}