CSS過渡懸停（h1裏面的div似乎不能正常工作）

我遇到了css轉換的一個小問題。在我的網站上，我有一個div，並在該div是h1。CSS過渡懸停（h1裏面的div似乎不能正常工作）

這是css代碼。

#inner1 { 
    background-image: url("rsz_astromenu1.jpg"); 
    height: 333px; 
    width: 500px; 
    display: inline-block; 
    opacity: 0.5; 
    font-size: 10px; 
} 
#inner1:hover { 
    font-size: 50px; 
    transition: font-size 1s linear; 
    opacity: 1; 
    transition: opacity 1s linear; 
}

我想動畫不透明度（從0.5到1）和字體大小（從10px到50px）。但是，當我將鼠標懸停在該div上時，不透明度會很好地轉換，但文本會立即更改大小。所以懸停似乎工作，並改變字體大小，爲什麼過渡省略？

如果我讓它＃inner1 h1：懸停，轉換工作正常，但只有當我將鼠標懸停在文本上。當我將鼠標懸停在該div上時，我想要進行字體大小轉換。

我試着解決這個問題並編寫了一個用於放大文本的JS腳本。

這是我想出來的。我將粘貼所有的HTML內容，因爲沒有太多內容。但是，這並不是很順利，我甚至每毫秒只增加0.09px，但它仍然看起來顛簸不平，並且還向瀏覽器發送了數百個不必要的命令，對吧？

我該如何解決這個問題？無論是與CSS或JS？在此先感謝;）。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Gallery</title> 
     <link rel="stylesheet" type="text/css" href="mainStyle.css"> 
    </head> 
    <body> 
     <div id="outer"> 
     <div id="middle"> 
     <div id="inner1" class="hover-menu"> 
      <h1 id="astro-h1" class="hover-menu">Astrofotografia</h1> 
     </div> 
     <div id="inner2"></div> 
     </div> 
     </div> 
     <script> 

     var JSinner1 = document.getElementById("inner1"); 
     var JSastroh1 = document.getElementById("astro-h1") 
     JSastroh1.style.fontSize = "16px"; 


     var textBigger = function() { 
      var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px"; 
      window.setInterval(textBigger, 1) 
      if (parseFloat(newSize) < 60) { 

       JSastroh1.style.fontSize = newSize; 
       console.log(newSize); 
      } 
     } 
     JSinner1.addEventListener("mouseover", textBigger) 




     </script> 
    </body> 
</html>

來源

2016-07-04 Mashchax

這是非常簡單的嘗試，問題是你的:hover選擇，因爲你要添加兩個轉變性質，最後一個是覆蓋前一個。爲了使這項工作，只需添加這是規則：

transition: opacity 1s linear, font-size 1s linear;

或者你可以使用

transition: all 1s linear;

來源

2016-07-04 16:23:58

哦。我的。神。我花了幾個小時弄清楚了這一點，並想知道爲什麼它不起作用。答案非常簡單。非常感謝 ;）。 – Mashchax

我很高興能夠提供幫助，當您遇到此類問題時，請使用Chrome開發工具或Firebug，以便查看您的款式是否被其他選擇器覆蓋 –

代替使用

transition: font-size 1s linear; 
transition: opacity 1s linear;

使用all

transition: all 1s linear;

或合併兩個成一個transition: font-size 1s linear,opacity 1s linear;

#inner1 { 
 
    background-image: url("rsz_astromenu1.jpg"); 
 
    height: 333px; 
 
    width: 500px; 
 
    display: inline-block; 
 
    opacity: 0.5; 
 
    font-size: 10px; 
 
} 
 
#inner1:hover { 
 
    font-size: 50px; 
 
    opacity: 1; 
 
    transition: all 1s linear; 
 
}

<div id="inner1"> 
 
    <h1> Some text </h1> 
 
</div>

來源

2016-07-04 16:21:37

總體來說，所有的財產應該在任何情況下不使用。這可能會在移動設備和較舊的PC /筆記本電腦上造成非常嚴重的死機。而不是這樣做，他應該使用雙重過渡屬性：transition：opacity 1s，font-size 1s; –

您正在用另一個覆蓋一個轉換。與

transition: font-size 1s linear,opacity 1s linear;

來源

2016-07-04 16:22:13 Borgtex

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style media="screen"> 
      #inner1 { 
       background-image: url("rsz_astromenu1.jpg"); 
       height: 333px; 
       width: 500px; 
       display: inline-block; 
       opacity: 0.5; 
       font-size: 10px; 
       transition: opacity 1s linear, font-size 1s linear; 
      } 
      #inner1:hover { 
       font-size: 50px; 
       opacity: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner1" class="hover-menu"> 
        <h1 id="astro-h1" class="hover-menu">Astrofotografia</h1> 
       </div> 
       <div id="inner2"></div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2016-07-04 16:35:26 Mers

CSS過渡懸停（h1裏面的div似乎不能正常工作）

回答

相關問題