jquery - 在链接悬停时显示带有负文本缩进的文本

Question

我希望能够将鼠标悬停在 href(具有背景图像和负文本缩进)上并在单独的 div 下方显示一行文本。

我在 css 和 jquery 中找到了显示/隐藏的教程，但它们不起作用，因为由于 -99999em 文本缩进，我隐藏了文本。

基本上，我在 ul 中使用了一个 sprite 来连续显示 11 辆汽车，当您将汽车悬停/链接时，sprite 会更改为另一种颜色的汽车，以表明它已被选中。当您将鼠标悬停在每辆汽车上时，我希望在显示的一排汽车下方为每辆汽车/链接提供描述。示例:http://jsfiddle.net/a7nDn/

<section id="brandSearch">
    <ul id="car-nav">
    <li id="car-01"><a href="#">小型车</a></li>
    <li id="car-02"><a href="#">小型车</a></li>
    <li id="car-03"><a href="#">家用车</a></li>
    <li id="car-04"><a href="#">家用车</a></li>
    <li id="car-05"><a href="#">豪华车</a></li>
    <li id="car-06"><a href="#">豪华车</a></li>
    <li id="car-07"><a href="#">跑车</a></li>
    <li id="car-08"><a href="#">SUV</a></li>
    <li id="car-09"><a href="#">SUV</a></li>
    <li id="car-10"><a href="#">SUV</a></li>
    <li id="car-11"><a href="#">皮卡</a></li>
    </ul>


    </section><!--end brandSearch-->       

CSS

#brandSearch {
    padding-top: 35px;
    height: 200px;
    margin-top: 20px;
    background-color: #FFF;
    box-shadow: 0 0 8px 1px rgba(50, 50, 50, 0.10);
    webkit-box-shadow: 0 0 8px 1px rgba(50, 50, 50, 0.10);
    -moz-box-shadow: 0 0 8px 1px rgba(50, 50, 50, 0.10);
    background-image: url(../images/megaphone.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
#car-nav {
    width: 920px;
    height: 123px;
    margin-left: 15px;
    padding: 0;
    background-image: url(../images/carNav.jpg);
    background-repeat: no-repeat;
    position:relative;
}
#car-nav li, #car-nav a {
    height: 123px;
    display: block;
}
#car-nav li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}
#car-01 { width: 90px; }
#car-02 { width: 90px; }
#car-03 { width: 90px; }
#car-04 { width: 90px; }
#car-05 { width: 90px; }
#car-06 { width: 90px; }
#car-07 { width: 80px; }
#car-08 { width: 80px; }
#car-09 { width: 70px; }
#car-10 { width: 70px; }
#car-11 { width: 80px; }
#car-01 a:hover { background: url(../images/carsHover.jpg) no-repeat 0px -0px;}
#car-02 a:hover { background:url(../images/carsHover.jpg) -90px 0px no-repeat; }
#car-03 a:hover { background:url(../images/carsHover.jpg) -180px 0px no-repeat; }
#car-04 a:hover { background:url(../images/carsHover.jpg) -270px -0px no-repeat; }
#car-05 a:hover { background:url(../images/carsHover.jpg) -360px -0px no-repeat; }
#car-06 a:hover { background:url(../images/carsHover.jpg) -450px -0px no-repeat; }
#car-07 a:hover { background:url(../images/carsHover.jpg) -540px -0px no-repeat; }
#car-08 a:hover { background:url(../images/carsHover.jpg) -620px -0px no-repeat; }
#car-09 a:hover { background:url(../images/carsHover.jpg) -700px -0px no-repeat; }
#car-10 a:hover { background:url(../images/carsHover.jpg) -770px -0px no-repeat; }
#car-11 a:hover { background:url(../images/carsHover.jpg) -840px -0px no-repeat; }

Answer 1

您可以将汽车描述 div 放在每个 anchor 内，并在悬停时显示它。

编辑:您需要设置跨度的样式以使其在您的 anchor 中可见

fiddle :http://jsfiddle.net/a7nDn/19/

HTML

<li id="car-01"><a href="#">小型车<span class="desc">car 01 is very good</span></a></li>

CSS

#car-nav li a span {
border: 1px solid lime;
text-indent: 0em;
position: absolute;
top: 0px;
left:0px;
width: 100%;
text-align: center;
display: none;
}

#car-nav li a:hover span {
display: block;
}