CSS :hover - 如何使 :hover 在文本上影响图像？

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;
}

编辑 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/

这个概念是一个标准的水平“标签”列表，其样式直接取自 Dan Cedarholm 的 CSS/HTML 模式网站 pea.rs (http://pea.rs/navigation/horizontal-tabs)

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

这个概念是你有一个链接，里面有一张图片和一些文字。在这种情况下，我使用了<img /> 标签，并简单地将它们设置为红色背景和固定宽度/高度。

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

悬停时，我调整<b/> 标签的左侧位置（而不是颜色）。

(为了简单起见，我在这个例子中缩写了代码)

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

您只需使用:hover 伪类定位父<a> 标记，然后选择要设置样式的子元素（在本例中为<b/>）。

但是，我感觉你的 CSS/HTML 中发生了更多时髦的事情，但这是为了表明你可以做你正在寻找的事情（更改链接的子元素的样式）。

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

希望对你有帮助！

干杯！

Answer 2

你尝试过这样的事情吗？：

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