CSSトランジションホバー（div内のh1が正常に動作しないようです）

CSSトランジションに若干の問題があります。私のウェブサイトにはdivがあり、divにはh1があります。CSSトランジションホバー（div内のh1が正常に動作しないようです）

ここに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：hoverにすると、テキストが上に移動したときだけ、適切に動作します。そして、そのdivにカーソルを合わせると、フォントサイズの遷移が必要になります。

問題を回避し、テキストを拡大するためのJSスクリプトを作成しようとしました。

ここで私が思いついたのです。私はすべてのHTMLコンテンツを貼り付けますが、それほど多くはありません。

しかし、これは本当にスムーズではありませんが、私は毎ミリ秒ごとに0.09pxだけインクリメントするようになりましたが、まだまだ不透明に見えるし、何百もの不要なコマンドをブラウザに送信します。

どうすれば問題を解決できますか？ CSSかJSのどちらか？ありがとうございます。代わり

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

使用all

transition: all 1s linear;

を使用して、またはマージの

<!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

で試してみてください、問題は、2つの遷移のプロパティを追加しているように、最後の1が前のものを上書きしている、あなたの:hoverセレクタです。この作業を行うためには、ちょうどそのルールにこれを追加します。

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

それとも、

transition: all 1s linear;

出典

2016-07-04 16:23:58

ああ。じぶんの。神。私はこれを考え出し、なぜそれがうまくいかないのか疑問に思って時間を過ごしました。答えはとてもシンプルでした。どうもありがとう ;）。 – Mashchax

このような問題に直面したときは、Chrome Dev ToolsまたはFirebugを使用して、スタイルが別のセレクタによって上書きされているかどうかを確認できます –

2に1 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：不透明度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トランジションホバー（div内のh1が正常に動作しないようです）

答えて

関連する問題