HTML，DIV，CSS - 悬停动作和背景图像变化 [英] html, div, css - hover action and background image changing

问题描述

<div id="footer">
   <a href="http:/tra-ta-ta.com">
      <div id="logo"></div>
   </a>
</div>

#logo
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}

它的工作原理，但是当鼠标移动到它BG-形象不改变，为什么？

It works, but bg-image doesn't change when mouse is over it, why?

推荐答案

好了，眼前的问题是，有没有＆LT; A＆GT; 元素中 #logo 。改变你的第二个规则来定位正确的元素将修正这样的问题：

Well, the immediate problem is that there's no <a> element inside #logo. Changing your second rule to target the correct element will "fix" this problem:

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

编辑：

正如指出了意见：

As was pointed out in the comments:

第一条规则的风格应该是
  施加到A元件和#logo
  DIV应该被删除，因为它提供
  没有任何目的。

The style of the first rule should be applied to the A element and the #logo DIV should be removed since it serves no purpose whatsoever.

这的确是你的问题的更好的修复，因为它会在未来降低杂波和帮助prevent进一步头痛。 （感谢@Julian的澄清的）

This is indeed the better fix for your problem, as it will reduce clutter and help prevent further headaches in the future. (thanks to @Julian for the clarification)

这篇关于HTML，DIV，CSS - 悬停动作和背景图像变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！