Question

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

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

基本上我在ul中使用了一个精灵来连续显示11辆汽车，当你将汽车/链接转移到另一种颜色的汽车上以显示它被选中时。我希望有一个描述，当你将鼠标悬停在每辆车上时，显示的汽车排下方的每辆车/链接。例如：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放在每个锚点内，并在悬停时显示它。

编辑：您需要设置范围的样式以使其在您的锚点中可见

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;
}

Answer 2

以下是4种不同的解决方案，它们都不需要对您的HTML进行任何更改，除了第4个（最后一个）之外，所有这些解决方案都要求您从text-indent中删除#car-nav li。第3和第4个解决方案只需要最少的CSS添加。

我隐藏了display:none上最初使用#car-nav>li>a而不是text-indent #car-nav li的值（请注意，您需要删除{{1} }}）即可。然后我在徘徊时展示它们：Fiddle

text-indent

如果要在完成悬停后隐藏它们，可以添加：Fiddle

$('#car-nav li').hover(function () {
    $(this).children('a').show();
});

第二种方式也可以使用纯css，例如：Fiddle

$('#car-nav li').hover(function () {
    $(this).children('a').show();
}, function() {
    $(this).children('a').hide();
});

如果您真的想使用#car-nav li { float: left; list-style: none; display: inline; } #car-nav>li>a { display:none; } #car-nav>li:hover a { display:block; }，可以添加：Fiddle

text-indent

在链接悬停上显示具有否定文本缩进的文本

2 个答案: