1

我一直在查看 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 短）

4

1 回答 1

0

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

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

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

只是一些建议：

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

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

于 2013-10-13T22:29:03.200 回答