タグ付けされた質問 「hover」

Chromeで:hoverホバーしているアンカーのスタイルを確認したい。ではFirebugは、私は要素の異なる状態を選択することができますスタイルのドロップダウンメニューがあります。 Chromeで同様のものが見つからないようです。何か不足していますか？

855 css  google-chrome  hover  state  google-chrome-devtools 

私がやりたいことは、特定のものdivがホバーされると、別ののプロパティに影響を与えることdivです。 例えば、でこのJSFiddleデモ、ときにホバーを超える#cubeことに変更background-colorはなく、私が欲しいのは、私が上にマウスを移動するときということで#container、#cube影響を受けています。 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

459 html  css  hover 

stackoverflowでは、ユーザーの評判にカーソルを合わせると、テキストが表示されます。私は多くの場所でこれを見てきましたが、ソースコードはそれがjsなしで実行できることを教えてくれます。そして私はこれだけを試してみました- <div="text">hover me</div>

262 html  hover 

HTMLリストとCSSを使用して水平メニューを作成しました。リンクの上にカーソルを置くと、すべてが正常に機能します。ご覧のとおり、リンクに太字のホバー状態を作成しましたが、太字のサイズの違いによりメニューリンクがシフトします。 このSitePointの投稿と同じ問題が発生します。ただし、投稿には適切な解決策がありません。私はどこでも解決策を探しましたが、解決策が見つかりません。きっと私だけがそうすることはできません。 誰かアイデアはありますか？ PS：メニュー項目のテキストの幅がわからないので、li項目の幅を設定することはできません。 .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: 5px; } .nav li a:hover{ text-decoration: none; font-weight: bold; } .nav li.first { …

204 html  css  hover  text-size 

新しいAngular2フレームワークでは、イベントのようにホバーする適切な方法を誰かが知っていますか？ でAngular1があったng-Mouseoverが、それは引き継がれているようには見えません。 ドキュメントを確認しましたが何も見つかりませんでした。

197 javascript  angular  events  hover 

ホバー時にCSSトランジションエフェクトがdivを移動するCSSがあります。 この例でわかるように、translateトランジションには、div内の画像を1px右/下に移動させる（そして、サイズを少しだけ変更する可能性があります）という、ひどい副作用があり、場違いに見えて、焦点が合っていない... グリッチはホバー効果が適用されている間ずっと適用されているようであり、試行錯誤のプロセスから、私は安全に、トランジショントランジションがdivを移動するときにのみ発生するように見える（ボックスの影と不透明度も適用されますが、違いはありません）削除時のエラー）。 この問題は、ページにスクロールバーがある場合にのみ発生するようです。したがって、divのインスタンスが1つしかない例でも問題ありませんが、同じdivが追加され、ページにスクロールバーが必要になるため、問題が再び発生します...

150 css  image  hover  positioning  translate-animation 

常に表示される「前へ」ボタンと「次へ」ボタンを備えたカルーセルを作成しました。これらのボタンにはホバー状態があり、青色に変わります。iPadのようなタッチデバイスでは、ホバー状態が固定されているため、ボタンをタップしても青色のままになります。それは欲しくない。 各ボタンのno-hoverクラスontouchendを追加して、CSSを次のようにすることもできます。button:not(.no-hover):hover { background-color: blue; }ただし、これはおそらくパフォーマンスにかなり悪影響を及ぼし、Chromebook Pixel（タッチスクリーンとマウスの両方を備えている）などのデバイスを正しく処理しません。 にtouchクラスを追加しdocumentElementて、CSSを次のようにするhtml:not(.touch) button:hover { background-color: blue; }こともできます。ただし、タッチとマウスの両方を備えたデバイスでは正しく機能しません。 私が好むのは、ホバー状態を削除することontouchendです。しかし、それは可能ではないようです。別の要素にフォーカスしても、ホバー状態は削除されません。別の要素を手動でタップすると動作しますが、JavaScriptでそれをトリガーできないようです。 私が見つけたすべてのソリューションは不完全に見えます。完璧な解決策はありますか？

144 javascript  css  hover  touch 

:hoverユーザーがタッチデバイス経由で当社のWebサイトにアクセスした場合、すべてのCSS宣言を無視したいと思います。ので、:hoverCSSは意味がない、と要素がフォーカスを失うまで、それは固執する可能性があるので、それもクリック/タップにタブレットトリガ場合は、それを邪魔することができます。正直なところ、なぜタッチデバイスが:hover最初にトリガーの必要性を感じるのかはわかりませんが、これは現実であり、この問題も現実です。 a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } それで、（どのように）:hover宣言したタッチデバイスのすべてのCSS 宣言を一度に（それぞれを知る必要なく）削除/無視できますか？

141 html  css  hover  touch 

http://www.clearleft.comなどの多くのサイトでは、リンクをホバーすると、デフォルトのアクションであるすぐに切り替わるのではなく、別の色にフェードインします。 この効果を作成するためにJavaScriptが使用されていると思いますが、誰でもその方法を知っていますか？

134 css  hover  fade  effect 

私は以前に作成したいくつかのWebサイトを持っていますが、jqueryマウスイベントを使用しています... iPadを入手したばかりで、すべてのマウスオーバーイベントがクリックに変換されることに気付きました...たとえば、1回ではなく2回クリックする必要があります..（実際のクリックよりも最初のホバー） これを解決するための回避策はありますか？多分私はマウスオーバー/アウトなどの代わりに使用したjqueryコマンド。ありがとう！

125 jquery  ipad  hover  mouseover 

次のようなHTMLを使用します。 <p>Some Text</p> 次に、このようないくつかのCSS： p { color:black; } p:hover { color:red; } タッチ対応デバイスで長いタッチをホバーを複製するようにするにはどうすればよいですか？マークアップを変更したり、JSを使用したりできますが、これを行う簡単な方法は考えられません。

120 javascript  html  css  hover  touch 

CSS :hover のみを使用する反対の方法はありますか？以下のように：場合:hoverでon Mouse Enter、CSSは以下と等価ありますかon Mouse Leave？ 例： リストアイテムを使用するHTMLメニューがあります。アイテムの1つにカーソルを合わせると、CSSカラーアニメーションが表示さ#999れblackます。マウスが項目領域を離れたときに、アニメーションがからblackに変化するときに、反対の効果をどのように作成でき#999ますか jsFiddle （私はこの例だけではなく、「反対の:hover」問題全体に答えたいとは思いません。）

115 css  hover 

デスクトップとタブレットの両方から使用することを意図したWebサイトを書いています。デスクトップからアクセスしているときに、画面のクリック可能な領域を:hover効果（異なる背景色など）で明るくしたいのですが、タブレットではマウスがないため、ホバー効果は必要ありません。 問題は、タブレット上で何かをタップすると、ブラウザには明らかに「見えないマウスカーソル」があり、タップした場所に移動してそこにそのまま残します。つまり、タップしたものがライトで点灯します何かをタップするまでホバー効果。 マウスを使用しているときにホバー効果を取得し、タッチスクリーンを使用しているときにホバー効果を抑制するにはどうすればよいですか？ 誰かがそれを提案することを考えていた場合、私はユーザーエージェントのスニッフィングを使いたくありません。同じデバイスにタッチスクリーンとマウスの両方を搭載することもできます（今日はそれほど一般的ではないかもしれませんが、将来的にはさらに普及するでしょう）。このデバイスには興味がありません。現在どのように使用されているか（マウスやタッチスクリーン）に興味があります。 私はすでにフックしようとしたtouchstart、touchmoveとtouchendのイベントをして呼び出すpreventDefault()抑制する「目に見えないマウスカーソル」時間の一部をしており、それらのすべてに。しかし、2つの異なる要素間をすばやく前後にタップすると、数回タップすると、「マウスカーソル」が移動し、ホバー効果が点灯しますpreventDefault。これは、常に光栄に思うわけではないようです。必要がない限り、詳細について退屈することはありません-それが適切なアプローチであるかどうかさえわかりません。誰かがより簡単な修正を持っている場合、私はすべて耳です。 編集：これは沼地標準のCSS :hoverで再現できますが、参考のために簡単に再現します。 <style> .box { border: 1px solid black; width: 150px; height: 150px; } .box:hover { background: blue; } </style> <div class="box"></div> <div class="box"></div> いずれかのボックスの上にマウスを置くと、青色の背景が表示されます。しかし、いずれかのボックスをタップすると、背景も青色になります。これは私が防止しようとしていることです。 上記を実行し、jQueryのマウスイベントをフックするサンプルもここに投稿しました。あなたはタップイベントも発火することを確認するためにそれを使用することができmouseenter、mousemoveそしてmouseleave。

113 javascript  hover  touch 

Chromeのデベロッパーツールを使用して、サイトでツールチップがどのように構成されているかを確認しようとしています。ただし、アイテムにカーソルを合わせても、「要素を検査」しても、htmlのツールチップには何も表示されません。私はスタイルを次のように設定できることを知っています:hoverにいますが、それでもツールチップのhtmlまたはcssが表示されません。 何か案は？

106 html  css  hover  google-chrome-devtools 

のセットがあります <a>RGBAの背景色が異なるが、アルファは同じタグのます。rgba属性の不透明度のみを変更する単一のCSSスタイルを書くことは可能ですか？ コードの簡単な例： <a href="#"><img src="" /><div class="brown">Link 1</div></a> <a href="#"><img src="" /><div class="green">Link 2</div></a> そしてスタイル a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} 私がやりたいの<a>は、がホバーされたときに不透明度を変更しながら、色を変更しない単一のスタイルを書くことです。 何かのようなもの a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

100 css  hover  background-color  rgba