css - 如何在悬停时将图像居中？ (目前悬停在左手边)

Question

我一直在查看 stackoverflow 并尝试不同的东西，但似乎没有任何效果。

我没有想法。

我这里有这个菜单(目前，我的链接是无效的)

<nav id="nav-left-en">
            <nav id="services-en">
                <a href="#">Services</a>
            </nav>

            <nav id="mission-en">
                <a href="#">Our Mission</a>
            </nav>

            <nav id="contact-en">
                <a href="#">Contact</a>
            </nav>

</nav>

我希望将鼠标悬停在图像中心。我的文本本身没有与中心对齐(因此我遇到了问题 - 但我不想将它居中到中心，因为悬停必须在任何地方看起来都一样)。现在，悬停显示为与文本本身左对齐。

这是我尝试的最后一个 CSS。我试过其他人，但我没有想法。我在 stackoverflow 和其他关注此类事情的地方运气不佳。

(注意:我也尝试过使用背景图片)

background: url('images/hover.jpg')  no-repeat;
            border: 0;
        width:150px; /* this is the width I want it to be. The text itself is 115px*/
        color:white;
        background-position: -58px 0px ;

编辑

我编辑了代码...这正是我要找的东西，除了每边都有一个额外的空间。例如，假设每个元素的宽度为 120px，那么颜色的宽度应为 150px。因此，每边多出 15px。

$(document).ready(function() {

    $('nav').hover(
        function () {
            $(this).css({"background-color":"#108040"});
            }, 
                function () {
                    $(this).css({"background-color":""});
                }
    );

});

也许这段代码可以帮助您理解我在寻找什么。在这种情况下，我决定使用 js(因为它比做同样事情的 css 更短)

Answer 1

好吧，这会在悬停时使背景图像水平“居中”。然而，提供的代码质量太差，无法直观地确定此结果是否符合您的预期。

http://jsfiddle.net/u8hfw/5/

但是你确实意识到你的 fiddle 中提供的 HTML 和 CSS 都存在语法错误( http://jsfiddle.net/u8hfw )?我已经在上面的 fiddle 中更正了它们只是为了让它工作。除此之外，HTML 属性以及 CSS 规则和选择器的使用非常糟糕。稍后您可能会遇到很多错误并花费大量时间调试它们。

一些建议:

• 尽量避免 !important在你的 CSS 中。
• 使用id仅当您需要定位特定元素时才使用 HTML 属性。否则使用 class属性。例如在所有导航上使用相同的类 <nav class="menu-item">并应用单个 CSS 规则 .menu-item{ *your css here* }
-

要查找语法错误，请使用 W3C validation service 验证您的代码