css - 使用 css 显示悬停链接的跨度

Question

我有一个链接，当我悬停它时，我希望仅使用 CSS 显示一个跨度。

HTML 在这里:

<a href="#" class="tooltip-trigger">Rules</a>

<span class="tooltip">
some personal information rules some personal information rules some personal information rules some personal information rules some personal information rules 
</span>

CSS 在这里:

.tooltip{ display: none;}
    .tooltip-trigger {
    background: url(../images/right-arro.png) right 13px no-repeat;
    background-color: #EEEEEE;
    display: block;
    float: left;
    height: 33px;
    line-height: 33px;
    padding: 0 15px 0 6px;
    color: #2578E8;

    }
    .tooltip-trigger :hover > .tooltip{ display: block;}

fiddle 在这里:http://jsfiddle.net/LBE55/

Answer 1

两个问题:

首先，> 是 child combinator选择器，而不是兄弟选择器。您的 span 元素不是您的 a 元素的子元素；这是一个 sibling 。你会想要使用 adjacent sibling combinator (+)相反。

其次，:hover 需要直接在 .tooltip-trigger 之后(删除空格)，否则您将在 中包含的元素上调用悬停code>a 元素(其中没有):

.tooltip-trigger:hover + .tooltip { display: block; }

JSFiddle demo .