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

小提琴在这里：http://jsfiddle.net/LBE55/

Answer 1

两个问题：

首先，>是child combinator选择器，而不是兄弟选择器。您的span元素不是a元素的子元素;这是一个兄弟姐妹。您需要改为使用adjacent sibling combinator (+)。

其次，:hover需要直接在.tooltip-trigger之后（删除空格），否则您将调用悬停在a元素中包含的元素（其中有无）：

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

JSFiddle demo

Answer 2

您必须在链接标记

中包含范围

    <a href="#" class="tooltip-trigger">Rules<span class="tooltip">some personal information rules some personal information rules some personal information rules some personal information rules some personal information rules </span></a>

Answer 3

你编写css的方式，span必须在a里面才能出现试试我在教程中找到的：

.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
border-radius: 5px;
bottom: 26px;
color: #FFFFFF;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
width: 220px;
z-index: 98;
}
.tooltip:hover:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #333333 rgba(0, 0, 0, 0);
border-image: none;
border-style: solid;
border-width: 6px 6px 0;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

和html：

<a class="tooltip" title="This is a tooltip" href="#"><span title="More">Tooltip Example</span></a>

Answer 4

// another way

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

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

4 个答案: