1

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

发光效果是使用 CSSbackground-image和 html 前景图像完成的。在将鼠标悬停在前景图像的不透明度上时，它会慢慢变为 0，从而显示下方的背景图像。

我已经研究出如何将文本放置在图像上，用于position:relative父级div和. 但是当鼠标悬停在文字上时，不再算作悬停在图像上，因为文字在图像上方。结果，发光效果不起作用。position:absolutep

在 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/

如您所见，当鼠标悬停在文本上时，图像不会褪色

4

2 回答 2

4

根据您更新的问题和小提琴（感谢小提琴！）这是一个修复：

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/horizo ​​ntal-tabs )

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

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

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

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

（为简单起见，我在此示例中缩写了代码）

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

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

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

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

我希望这会有所帮助！

干杯!

于 2013-03-25T16:52:33.880 回答
0

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

.textThatIwantToHover:hover, .imageThatIwantToAffect:hover{
    //some css
}
于 2013-03-25T16:34:40.550 回答