CSS懸停轉換不起作用

我在獲取此懸停的任何形式的轉換時遇到問題。我希望它在顯示時稍微慢一點，而不是突然停下來。所以也許只是延遲？還是輕鬆點？無論如何，我似乎無法得到任何這些東西的工作。CSS懸停轉換不起作用

.forum-image { 
 
float: left; 
 
width: 75%; 
 
overflow: auto; 
 
position: relative; 
 
opacity: 1; 
 
transition: opacity 0.3 ease-in; 
 
-webkit-transition: opacity 0.3 ease-in; 
 
background-color: #dcdcdc; 
 
} 
 

 
.forum-image:hover .descriptionbox { 
 
visibility: visible; 
 
} 
 

 
.descriptionbox { 
 
opacity: 0.8; 
 
background-color: #FFF; 
 
width: 100%; 
 
height: 100%; 
 
visibility: hidden; 
 
position: absolute; 
 
top: 0; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
box-sizing:border-box; 
 
-moz-box-sizing:border-box; /* Firefox */ 
 
padding: 10px; 
 
}

<div class="forum-image"> 
 
    <img src="http://i.imgur.com/VwTgk9a.png"> 
 
    <div class="descriptionbox"> 
 
     Testtesttest 
 
    </div> 
 
</div>

來源

2014-10-20 pinkbutterfly

試試這個http://ianlunn.github.io/Hover。你有沒有試過用Google搜索這個問題？ – parth6 2014-10-20 10:18:09

您尚未轉換可見性屬性...和轉換延遲。 – 2014-10-20 10:18:16

而不是使用「visibility：hidden的」嘗試改變只是不透明度，就像這樣：

.forum-image:hover .descriptionbox { 
    opacity: 0.8; 
}

再戴上說明框中的過渡代碼：

.descriptionbox { 
    /* Other properties... */ 
    padding: 10px; 
    opacity: 0; /* Start opacity at 0, changes when hovered... */ 
    transition: opacity 0.3s ease-in; 
}

現在說明框有tr應答屬性，當圖像懸停時，應用新的不透明度（在原始類中設置轉換時間）。然後，當鼠標退出該區域時，新的不透明度類將被刪除。

務必從原來的代碼中刪除

visibility: hidden;

，否則你永遠也看不到任何東西！（這搞砸我起初當我試圖修復它）

Here is a JSfiddle for demonstration

來源

2014-10-20 10:23:02

.forum-image { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.descriptionbox { 
 
    position: absolute; 
 
    background: #ffffff; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    
 
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
 
    transition: opacity 1s; 
 
} 
 

 
.descriptionbox:hover { 
 
    opacity: 1;  
 
}

<div class="forum-image"> 
 
    <img src="http://i.imgur.com/VwTgk9a.png" /> 
 
    <div class="descriptionbox"> 
 
     Testtesttest 
 
    </div> 
 
</div>

來源

2014-10-20 10:25:28 dizel3d

CSS懸停轉換不起作用

回答

相關問題