CSS：悬停 - 如何使：悬停在文字上影响图像？

Question

我有一个导航菜单完成的图像，并且我使用CSS过渡和不透明度在图像上发光效果的鼠标。为了SEO的目的，我希望导航菜单包含文本链接。

的发光效果使用CSS background-image和HTML前景图像完成。在鼠标上方，前景图像的不透明度慢慢变为0，露出下面的背景图像。

我已经制定了如何在图像上放置文字，使用position:relative作为父div和position:absolute作为p。但是当鼠标悬停在文本上时，它不再被视为悬停在图像上，因为文本位于图像的顶部。结果，发光效果不起作用。

在flash中，将鼠标悬停在一个对象上导致另一个对象发生更改非常容易。有没有办法在CSS中做到这一点？如果不是，那么JavaScript可以做我需要的东西？

编辑

感谢您的回信。这是代码。道歉，如果它是混乱的，我没有做多年的HTML编码，并从来没有使用过CSS。

我只是把文字和链接的第一个按钮为止。

<div id="nav"> 
    <ul> 
    <li><a href="index.htm"><p class="homebutton">HOME</p><img class="navbutton" src="_images/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li> 
    <li><img class="navbutton" src="_images/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></li> 
    <li><img class="navbutton" src="_images/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></li> 
    </ul> 

<!-- end .nav --></div> 

CSS

#nav { 
    background-image: url(../_images/nav-bg.png); 
    width:960px; 
    height:115px; 
    margin-bottom:10px; 
    position:relative; 
} 

.navbutton { 
    -webkit-transition:opacity 0.7s ease-in-out; 
    -moz-transition:opacity 0.7s ease-in-out; 
    -o-transition:opacity 0.7s ease-in-out; 
    transition:opacity 0.7s ease-in-out; 
    float:left; 
} 

img.navbutton:hover { 
    opacity:0; 
}  

.homebutton { 
    position:absolute; 
    left:19px; 
    top:70px; 
    color:rgba(255,255,255,1); 
    font-weight:bold; 
    font-size:16px; 
} 

EDIT 2

好，我创建了一个小提琴，使其更易于理解：http://jsfiddle.net/sK5q2/

正如你所看到的图像不当鼠标移过文字时淡出

Answer 1

基于更新后的问题和小提琴（为小提琴感谢！）这里有一个修复：

http://jsfiddle.net/sK5q2/1/

这是一样简单简单地调整你的CSS选择这样的：

变化：img.navbutton:hover {

要：a:hover img.navbutton {

我会尽力解释，但可能它做不好工作。 ;）

如果元素是同级的，如...

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

...你可以重新定位他们，但是你有喜欢的款式，但他们彼此非常独立。虽然你的CSS样式确实把它放在另一个之上，但它纯粹是可视化的，而不是技术性的。将鼠标移到文本上就好像您从<img/>元素移动到<p/>元素。

如果您看到上述HTML，请在鼠标触及视觉图像时考虑该布局。 <img/>将在代码中突出显示。如果您触摸文字，<p/>会突出显示，这是一个不同的元素。现在

，如果你包裹在一个链接...

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

...你所定位的链接作为热点为:hover，你总是摸链接热点不管是否也触摸的<img/>或<p/>标签。

从这个意义上说，如果您触摸图像，<a/>标记将会突出显示，以及<img/>元素。如果移动到文本，<a/>标签仍将突出显示，但现在<p/>元素将突出显示。

事情是，我们的CSS风格是针对“总是感动”的元素<a/>。

对不起，这比我想象的更难解释。希望这有助于！ =）

干杯！

---

..原贴..

---

我有一种感觉，你真正的问题是一个简单的CSS问题，但我创建了一个基于你是什么证据的概念提琴描述：

http://jsfiddle.net/7rU7L/

的概念是一个标准的水平“选项卡”名单直接从丹Cedarholm的CSS/HTML模式的网站pea.rs拍摄风格（http://pea.rs/navigation/horizontal-tabs）

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

这个概念是，你有一个链接，里面有一个图像和一些文字。在这种情况下，我使用了<img />标签，并简单地用红色背景和固定的宽度/高度对它们进行了样式设计。

然后，我绝对将<b/>标签定位在图像上。

在悬停时，我调整标记的左侧位置（而不是颜色）。

（我缩写代码在本例中为简单起见）

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

只需瞄准与:hover伪类的父<a>标签，并选择子元素（在这种情况下<b/>）你想风格。然而，我有一种感觉，你的CSS/HTML有更多时髦的事情发生，但这是为了表明你可以做你正在寻找的东西（改变链接的子元素上的样式）。

如果您发布真正的代码，我可以查看它，并调整自己的答案。

我希望有帮助！

干杯！

Answer 2

你有这样的尝试？：

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