我想改變

-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

回答

相關問題