タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイル CSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
hoverメディア特性には@media (hover: hover)と@media (any-hover: hover)の2種類があります。 @media (hover: hover): 主な入力デバイスがhoverに対応している場合に適用する@media (any-hover: hover): 入力デバイスのいずれかにhoverに対応している入力デバイスが含まれる場合に適用する少し前までは@media (hover: hover) and (pointer: fine)で「主な入力デバイスがhoverに対応していて、かつマウスのような正確なポインターがあるデバイスの場合」にのみhoverを適用するやり方を行っていましたが、この方法ではiPadのMagic Keyboardのカーソル操作でhoverが適用されないようです。 そのため、Magic Keyboardが接続されている時のみhov
AtroposAtropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and as WebComponent (for use with Angular, Vue, Svelte, Solid and other frameworks)
スマホにおける:hoverは、タップした要素に装飾があたった後、別の要素に「タップされた」と判定されるまで装飾が残ります。 :hoverで指定したものは、タップして指を離した後も設定した装飾が残り続けることになるのでデザイン的・ユーザビリティ的にもあまりよくありません。 これでいくと、タッチ端末でタップする瞬間の装飾をしたいなら、:hoverではなく:activeの方が近いということになります。 では、PCではhover、スマホ・タブレットではactiveと切り分けて、同じスタイルをそれぞれ指定すればいい、という考えもできますがなかなかスッキリしませんよね。 そもそもタッチ端末ではユーザーの動作に反応する装飾は行わない、というのも選択肢としてはありだと思いますが、今回はそこも含めてどう制御するかという観点でまとめていきます。 端末・ブラウザによる挙動の違い ios特有のものなのか、特にsa
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ
text-shadow but no text shadows? Let me clear the confusion by showing the hover effects we are going to build in the following demo: Without looking at the code many of you will, intuitively, think that for each hover effect we are duplicating the text and then independently animating them. Now, if you check the code you will see that none of the text is actually duplicated in the HTML. And did y
Chrome91で#tab-hover-cardsと#enable-tab-searchと#sharing-qr-code-generatorが削除されたChromeGoogleバグtab-hover-cards tab-hover-cards タブホバーカードが何かっていうとこれです。 マウスカーソルをタブ上に持っていくと、詳細がポップアップで表示されます。 このゴミを出したくない場合はchrome://flags/からtab-hover-cardsをDisabledにすることで非表示にすることが可能です。 当然100人中99人がオフにしていると思いますが、なんとChrome91で強制オンにされたうえで設定フラグが削除されました。 つまり、オフにすることができません。 当然ながら大不評で、バグチケットも乱立しています。 https://bugs.chromium.org/p/chromi
CSSでhover時に画像を切り替えて、より複雑でオシャレなWEBページを作成したいということがあります。 ここでは以下の猫と犬の2つの画像を用いて色んなパターンにおいて、CSSでhover時に画像を切り替える方法について紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="img_container"> <img src="cat-2536662_1280.jpg" width="100%" height="100%"> <img src="t-r-photography-TzjMd7i5WQI-unsplash.jpg"
Many Tricksがポップアップ・パレットのカスタマイズやウィンドウ・レイアウトの保存機能などを実装したMac用ウィンドウマネージャアプリ「Moom v4.0」をリリースしています。詳細は以下から。 米オレゴン州のソフトウェア会社Many Tricksは現地時間2024年08月21日、2011年から開発＆販売しているMac用ウィンドウマネージャアプリ「Moom」の最新バージョンとなる「Moom v4.0」をリリースしたと発表しています。 It may have been a long time coming—over 12 years since Moom 3’s release—but we think Moom 4 was well worth the wait. During those years, we’ve been listening to all your input,
画像にカーソルを乗せて拡大させるのは、実務でも非常に良くある実装です。 そして画像を表示させるには、HTMLの『imgタグ』と、CSSのプロパティ『background-image』の2種類の方法があります。 今回は、両方のケースで画像を拡大する方法を解説していきますが、どちらもCSSのみで実装できます。 じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！
A couple of simple & subtle CSS-based line hover animations for links. Those little line animations are a perfect way to enhance a design and add subtle micro-interactions to a website. Today I’d love to share some super-simple ideas that are based on CSS only, no JavaScript involved. Most effects use a pseudo-element as line and some have a little SVG line animation, like this one: <a href="#" cl
問題 ・子要素にマウスが乗ったら、親要素の色を変えたい。 ・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。 やっぱりJavaScriptがいりますか？ 答え CSSでできます。 pointer-eventsプロパティでできます。 pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。 pointer-events: auto; /* 初期値。通常通りホバーやクリックのイベントを受け取る */ pointer-events: none; /* イベントを受け取りません */ pointer-eventsプロパティは一般的なブラウザではほぼ使用可能。IEは11以降で使用可能です。 例1）親要素:hover を特定の子要素にマウスが乗った時に適
This article is all about experimenting with modern CSS features. If you are wondering what the future of CSS will look like, you are in a good place! We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offe
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users. Up until fairly recently, we might have caught ourselves making assumptions based on the size of a device: that mobile devices would rely on touch input, for instance, while for larger screen sizes we might assume the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く