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 ;

修改

我编辑了代码......这正是我正在寻找的，除了每边都有一个额外的空间。例如，假设每个项目的宽度为120像素，那么颜色的宽度应为150像素。因此，每侧额外增加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/

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

只是一些建议：

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

要查找语法错误，请使用W3C validation service

验证您的代码

如何在悬停中居中图像？（目前在左侧徘徊）

1 个答案:

如何在悬停中居中图像？ （目前在左侧徘徊）

1 个答案:

如何在悬停中居中图像？（目前在左侧徘徊）