淡入簡單的css工具提示

好消息問題。試圖讓一個簡單的CSS工具提示淡入淡出，但不能讓它工作。搜查了很多，但找不到簡單的答案。我假設我把過渡CSS3放錯了地方，但它不是在別人的工作要麼...淡入簡單的css工具提示

<style> 

    .tooltip{ 
     display: inline; 
     position: relative; 
    } 

    .tooltip:hover:after{ 
     border-radius: 5px; 
     bottom: 26px; 
     content: attr(title); 
     left: 20%; 
     adding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 220px; 
    } 

.tooltip:hover:before{ 

border-width: 6px 6px 0 6px; 
bottom: 20px; 
     content: ""; 
     left: 50%; 
     position: absolute; 
     z-index: 99; 
      opacity: 0; 
-webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    } 

</style>

HTML

<br /><br /><br /><br /> 
<a href="#" title="Text text text text" class="tooltip"><span title="More">CSS3  Tooltip</span></a>

來源

2014-01-15 PhilD

那裏有一百個工具提示教程！只有CSS，CSS3，JavaScript，jQuery的排序。只需花更多的時間閱讀文章，不僅下載源代碼... –

你並不需要同時:before和:after 。
您必須首先定義:after內容及其樣式，並進行過渡。
然後在:hover上定義:after樣式，僅使用過渡屬性（例如不透明度）。

演示：http://jsfiddle.net/abhitalks/aRzA3/1/

CSS：

.tooltip:after { 
    content: attr(title); /* define content here */ 
    ... 
    opacity: 0; /* define initial transition property */ 
    -webkit-transition: opacity 1s ease-in-out; /* define transitions */ 
    transition: opacity 1s ease-in-out; 
} 
.tooltip:hover:after { 
    opacity: 1; /* provide only the final transition property */ 
}

來源

2014-01-15 13:22:07 Abhitalks

您需要設置裏面.tooltip屬性：以後，不會.tooltip：懸停：後。

然後加：

.tooltip:after { 
    opacity:0; 
}

和：

.tooltip:hover:after { 
    opacity:1; 
}

的.tooltip：懸停：之前不需要這個。

見http://jsfiddle.net/NHkQr/

來源

2014-01-15 13:22:57 Leon

我一直在尋找相同的，但沒有JavaScript或jQuery的。我發現以下方式使用純CSS3轉換。

CSS3

a.tooltip span 
{ 
    position: absolute; 
    top: 30px; 
    left: 50%; 
    margin-left: -76px; 
    z-index: 999; 
    width: 250px; 
    height: auto; 
    color: #fff; 
    font-size: 12px; 
    line-height: 20px; 
    border-radius: 6px; 
    padding: 2px; 
    text-align: center; 
    background: #000; 
    border: 1px solid #808080; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: all 2s ease-out 0s; 
    -moz-transition: all 2s ease-out 0s; 
    -ms-transition: all 2s ease-out 0s; 
    -o-transition: all 2s ease-out 0s; 
    transition: all 2s ease-out 0s; 
} 
a:hover.tooltip span 
{ 
    visibility: visible; 
    -webkit-opacity: 0.90; 
    -moz-opacity: 0.90; 
    opacity: 0.90; 
}

HTML

<a class="tooltip" href="#">Hover Me 
    <span>Some text information that you want to display in tooltip</span></a>

更多細節與現場演示，請訪問：Tooltip Example using CSS3 Transitions這裏。

來源

2015-01-15 10:53:21

淡入簡單的css工具提示

回答

相關問題