CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素にカーソルを合わせると、オーバーフローしたコンテンツを表示します

要素にカーソルを合わせたときにオーバーフローしたコンテンツを表示するには、次のコードを実行してみてください。

例 

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.demo {
            white-space: nowrap;
            width: 180px;
            overflow: hidden;
            border: 2px solid blue;
        }
         div.demo:hover {
            text-overflow: inherit;
            overflow: visible;
         }
      </style>
   </head>
   <body>
      <p>Hover to see the complete text below:</p>
      <br>
      <div class = "demo" style = "text-overflow:clip;">Demo Text that will hide in this box.</div>
   </body>
</html>

  1. CSS表示プロパティの操作

    CSS Displayプロパティは、要素がWebページにどのように表示されるかを設定するために使用されます。その値の一部がここに表示されます- Sr.no プロパティ値 説明 1 インライン 要素をインライン要素として表示します。 2 ブロック 要素をブロック要素として表示します。 3 コンテンツ コンテナを非表示にして、要素の子要素をDOMの次のレベルの子にします 4 フレックス 要素をブロックレベルのフレックスコンテナとして表示します 5 グリッド 要素をブロックレベルのグリッドコンテナとして表示します 6 インラインブロック

  2. CSSでホバー時に要素を表示するにはどうすればよいですか？

    CSSを使用してホバーで要素を表示するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }