我想改变

-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
我该怎么做？

干杯！

来源

2013-03-10 Kindo Precious

通常，更改悬停时的显示方式是一种不好的做法，因为它可以移动对象的位置，从而结束悬停。然后这会使对象回到原来的位置，所以你会看到一个闪烁。我想，这对大量的降价计划有所贡献。 – 2013-03-10 21:56:43

你可以很容易地在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-10 22:04:23 John

酷感谢，作品只会根据我自己的风格选择进行调整 – 2013-03-12 14:22:24

回答

相关问题