-4

当我将鼠标悬停在跨度类上时，我想更改此工具提示的显示属性这

是用户将悬停的跨度

<span class="video-title"></span>

这是将显示的工具提示

<span class="toolTip">Top 10 Latest</span>

这是css风格

.toolTip{
    position:absolute;
    top:-34px;
    left:47px;
    z-index:100;
    display:none;
    padding:5px 6px 5px 6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background-color:#000;
    text-align:center;
    text-decoration:none;
    text-shadow:black 0 1px 0;
    white-space:nowrap;
    font-style:normal;
    font-size:11px;
    font-family:Helvetica,Arial,sans-serif;
    line-height:1
}

问题是哪个最适合显示更改？Javascript 或 Css
，我将如何做到这一点？

干杯!

4

1 回答 1

0

你可以很容易地在 CSS 中做到这一点。如果将工具提示span放在视频标题span中，则可以将其设置为display:none并更改为display: block视频标题悬停时。

<span class="video-title">
    Title text here
    <span class="tooltip">Tooltip text here</span>
</span>

.video-title {position: relative}
.tooltip {display: none;}
.video-title:hover .tooltip {display: block; position: absolute;}

显然，您会在其中添加自己的样式和定位。理想情况下，工具提示应绝对定位，以免干扰页面布局。将其设置为父级以position: relative确保工具提示相对于其父级在页面上的位置进行定位。

于 2013-03-10T22:04:23.683 回答