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/>元素移到元素上。

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

现在，如果你把它包装在链接......

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

...并且您将该链接定位为:hover的热点，无论鼠标是否还触及，您都会触及链接热点。 {1}} 或 <img/>代码。

从这个意义上讲，如果您正在触摸图片，标记以及<a/>元素都会突出显示。如果您移至文字，<img/>标记仍会突出显示，但现在<a/>元素会突出显示。

问题是，我们的CSS样式定位于“始终触及”元素。

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

干杯！

..原帖..

我有一种感觉，你真正的问题只是一个CSS问题，但我根据你所描述的内容创建了一个概念验证小提琴：

http://jsfiddle.net/7rU7L/

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

<a/>

这个概念是你有一个链接，里面有一个图像和一些文本。在这种情况下，我使用了<li id="a"><a href="#"><img />Ahy!</a></li>标签，并使用红色背景和固定的宽度/高度对它们进行了简单设计。

然后我绝对将<img />标记放在图像上。

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

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

<b/>

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

但是，我觉得你的CSS / HTML会有更多时髦的事情，但这是为了表明你可以做你想要的事情（改变链接子元素的样式）。 / p>

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

我希望有所帮助！

干杯！

Answer 2

你尝试过这样的事吗？：

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

CSS：悬停 - 如何制作：悬停在文本上会影响图像？

2 个答案: