  |
はてなキーワード: :hoverとは
動画の上部にあるグラデーション部分にマウスを乗せたときだけ、サムネが見られるようにしている。
(他とも干渉してるかもしれないので、以下でそのまま動くかはわからん)
/* 上部マウスホバーでサムネイル表示 */ #movie_player .ytp-gradient-top{ display: block !important; opacity: 0; pointer-events: auto; } #movie_player.paused-mode:hover .ytp-gradient-top{ opacity: 1; } #movie_player:not(.unstarted-mode) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay{ display: block !important; opacity: 0; pointer-events: none; } #movie_player .ytp-gradient-top:hover ~ .ytp-cued-thumbnail-overlay{ opacity: 1; z-index: 999; } #movie_player:not(.unstarted-mode:hover) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay button.ytp-large-play-button{ opacity: 0; }
パソコン画面右上のアイコンで選ぶ表示スタイルを一番右の「ヘッドライン」表示にしといてな
/* ヘッドライン表示を切り詰める */ /* #container 指定でCSS優先度を上げる必要がある */ body[data-entrylist-layout="headline"] #container .entrylist-main{ padding-right: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents{ padding-left: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ position: static !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ top: 14px !important; } /* ヘッドライン表示にサムネイルを追加 */ body[data-entrylist-layout="headline"] #container .entrylist-contents-main{ display: grid; grid-template: "users body title" 28px "bookmark body domain" 20px / 60px 120px 1fr; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users{ grid-area: users; } body[data-entrylist-layout="headline"] #container .entrylist-contents-users a span{ margin-right: 0; } body[data-entrylist-layout="headline"] #container .following-bookmarks-container{ grid-area: bookmark; position: absolute; left: 20px; bottom: 2.5px; } body[data-entrylist-layout="headline"] #container .entrylist-contents-body{ grid-area: body; } body[data-entrylist-layout="headline"] #container .entrylist-contents-title{ grid-area: title; z-index: 99; } body[data-entrylist-layout="headline"] #container .entrylist-contents-title > a{ margin-left: -120px; padding-left: 120px; margin-bottom: -28px; padding-bottom: 28px; width: 890px; white-space: nowrap; display: block; } body[data-entrylist-layout="headline"] #container .entrylist-contents-body{ display: block !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{ position: static; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb span{ width: 100px; height: 50px; } body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{ background: #f0f0f0; width: 100px; height: 50px; background-position: 50%; background-size: cover; border-radius: 4px; } /* 2行目に、総合ではドメイン(domain), サイト内一覧ではカテゴリと時刻(meta), マウスホバー時はいずれも概要文(description) */ body[data-entrylist-layout="headline"] #container .entrylist-contents-domain, body[data-entrylist-layout="headline"] #container .entrylist-contents-meta, body[data-entrylist-layout="headline"] #container .entrylist-contents-description{ grid-area: domain; display: block; opacity: 0; padding: 0 !important; } body[data-entrylist-layout="headline"] #container .entrylist-contents-meta > li{ vertical-align: top; } html[data-stable-request-url^="https://b.hatena.ne.jp/entrylist/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-domain, html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-meta{ opacity: 1; } body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain img.favicon + span, body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-meta{ opacity: 0; } body[data-entrylist-layout="headline"] #container .entrylist-contents-description{ opacity: 0; position: absolute; top: calc(40px - 3px); left: calc(180px + 16px + .5em); height: 20px; line-height: 20px; color: #999; min-height: auto !important; padding-right: 0 !important; width: 890px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain, body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-description{ opacity: 1; } /* 増田調整 */ body[data-entrylist-layout="headline"] #container a[href^="/entry/s/anond.hatelabo.jp/"] .entrylist-contents-thumb{ background-image: url('https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif'); } /* マウスホバー時にサムネも反応させる見た目調整 */ .entrylist-contents-title:hover ~ .entrylist-contents-body .entrylist-contents-thumb{ opacity: .90; }
https://coliss.com/articles/build-websites/operation/css/one-way-hover-effect.html
Webページのスタイルでマウスカーソル乗せるとリンクとかボタンの表示が少し変わるやつあるじゃないですか。あれって、ホバーっていうCSSの機能なんですけど、
もうWeb閲覧ユーザーのPC利用率とか15%くらいまで落ち込んでる時代なので、正直あれのデザイン触る気しないんですよね
みんなスマホとかタブレットつかってて、指で直接リンクをタップしているのが現代なんです。
でもなぜか Web Design 界隈だといろんな実装とか充実してたりして、キャッキャウフフしてるんですけど、正直デザイナーのオナニーなんじゃないの？っていう気持ちがあります。
まぁ :action としても使えるので、完全に無駄とはいいませんけど。
私の個人サービスではどれくらい使ってるかな？って思って見直しましたけど、やっぱり :hover は二行しか使ってなかったですね
某なんとかパン的なのとか、増田のツリーが大きくなりすぎると見づらくなるのをどうにかしたいなと思ってブラウザアドオンのカスタムCSSをいじってるんだけどなんか微妙…。
本当はクリックでツリー展開したかったんだけど無理そうだからホバーにしたとか、本当は子要素にulを持つliに印を付けたかったけどできなかったとか、いろいろ至らぬ点が重なって気に食わない。
やっぱりCSSだけじゃダメなのかなあ。はてなには天才CSS屋さんとかいそうなので、なにかいい方法あったらおせーて。
（＞とか化けちゃうけど下に自分の置いときます。ド素人かつ適当なんで統一感なくてすいません）
li ul li {
display: none;
}
div.refererlist ul li:hover > ul li {
display: block;
}
div.refererlist > ul > li > ul > li:first-child {
display: block;
}
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
_________________ここから下は古い情報▼__________________________________________________
今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ
作りました
要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。
そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！
と、強く考えておられる方むけの情報です。
私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。
ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。
で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。
私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。
仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。
必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。
そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。
ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。
＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。
＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい
＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種
ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。
それなりに探したのだけど、見当たらなくて・・・だから自作したので。
/* * ---------------------------- * black-out.css * author zamamin.com * build 2008.8.09 15:03 * version 0.0.31 * fix @namespaceを書いてなかったので追加 * ---------------------------- * */ @namespace url(http://www.w3.org/1999/xhtml); /* 全てのエレメントをリセット */ body,body * { background-image:none !important; background-color:#000 !important; border-color:#333 !important; text-decoration:none !important; color:#aaa !important; /*<- テキスト色 */ font-size:16px !important; /*<- 文字サイズ */ font-weight:normal !important; padding:0.15em !important; margin:0 !important; line-height:1.25em !important; text-align:left !important; text-indent:0 !important; font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; float:none !important; clear:both !important; position:relative !important; width:auto !important; height:auto !important; } body { background-color:#000 !important; padding:0.5em !important; } body * p, body * div, body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{ margin-bottom:0.3em !important; float:left !important; clear:both !important; } /* リンク色 */ body * a, body * a *{ color:#a50 !important; } /* アクセス済みのリンク色 */ body * a:visited{ color:#a50 !important; } /* カーソルを合わせた時のリンク色 */ body * a:hover, body * a:hover *{ color:#0aa !important; background-color:#609 !important; } /* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */ body * img{ opacity:0.3 !important; height:15px !important; width:15px !important; } /* 画像はマウスカーソルもっていけば原寸サイズになる */ body * img:hover{ opacity:0.9 !important; height:auto !important; width:auto !important; } button, input, select, option, textarea{ color:#f00 !important; padding:0.05em !important; height:auto !important; } /* テーブルのスタイル */ table{ border:none; } table td, table th{ border:none; border-right:1px dashed #999 !important; border-bottom:1px dashed #999 !important; } /* for 2ch（暫定） */ body * dt{ font-weight:bold !important; } /* 二コ動 */ embed#flvplayer{ height:540px !important; width:952px !important; }
インスパイヤ元 - http://anond.hatelabo.jp/20080219145538
@-moz-document domain("b.hatena.ne.jp") { ul#bookmarked_user{ font-size: 105%; } #bookmarked_user li{ list-style-type: decimal; } #bookmarked_user li:before{ content: '\FF1A'; } #bookmarked_user .timestamp:before{ content: '\756A\7D44\306E\9014\4E2D\3067\3059\304C\306F\3066\306A\3067\3059\FF1A '; font-size: 110%; font-weight: bold; color: #008000; } #bookmarked_user img.hatena-id-icon, #bookmarked_user .user-tag, #bookmarked_user .hatena-star-comment-container, #bookmarked_user .hatena-star-star-container{ display: none; } #bookmarked_user a[href*='bookmark-']:before{ content: 'ID:'; } #bookmarked_user a[href*='bookmark-']:link, #bookmarked_user a[href*='bookmark-']:hover{ color: black; text-decoration: none; } #bookmarked_user a[href*='bookmark-']:hover{ color: blue; text-decoration: underline; } #bookmarked_user span.comment{ display: block; padding: 8px 1em; margin-left: 1.5em; } }
曜日の表記と「2008年02月19日」を「2008/02/19」にしたかったが、方法が分からなかった。あ、あと投稿時間も。Greasemonkey じゃないと無理か？
転載・改変は自由なので、再利用したいとかここを変えた方がより良い、という方は好きに使って結構です。
→ はてブちゃんねる
はてなブックマークを2ちゃんねる風に見せるサービスktkr！
