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