質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4220閲覧

droppableの「hoverClass」と「tolerance」がうまく動作しません。

MAYAKO

総合スコア30

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/04/09 04:13

MAYAKOです。
teratailユーザーの皆様、いつもお世話になっております。
今日はjQueryUIの「droppable」を勉強していて、詰まってしまったので、質問させていただきます。

表題の通り、droppableにhoverClassとtoleranceのオプションをつけたのですが、それがうまく動作してくれません。
何度コードを確認しても特に間違ってないようなので、なぜ動作しないのかわかりません。
その他のdragやcloneのイベントなどは動作するようです。

コードは下記のような感じです。

lang

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>droppbaleの練習</title> 6 <link rel="stylesheet" href="jQuery-ui.css"> 7 <script src="external/jquery/jquery.js"></script> 8 <script src="jquery-ui.min.js"></script> 9<style> 10 11 #drop { 12 width:200px; 13 height:200px; 14 background: yellow; 15 text-align:center; 16 color:brown; 17 font-weight:bold; 18 float:left; 19 margin-bottom:50px; 20 } 21 22 .box { 23 width:50px; 24 height:50px; 25 background: orange; 26 text-align:center; 27 color:black; 28 font-weight:bold; 29 float:left; 30 } 31 32 .hover { 33 background: blue; 34 } 35 36</style> 37</head> 38<body> 39<div class="box">box</div> 40<div id="drop">drop here!</div> 41 42<script> 43 $(function(){ 44 $('.box').draggable({ 45 helper: 'clone' 46 }); 47 $('#drop').droppable({ 48 accept: '.box', 49 hoverClass: 'hover', 50 tolerance: 'fit', 51 drop: function(event, ui){ 52 ui.draggable.clone().appendTo(this); 53 console.log('Dropped!'); 54 } 55 }); 56 }); 57</script> 58</body> 59</html>

もし、ここが違うじゃないか!という部分がありましたら、ご指摘いただけると助かります。
どうぞご回答よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

記載されているコードで確認しましたが、hoverClassは正常に働いているようです。
確認されているブラウザが何か不明ですが、ChromeのDeveloper Toolsなどで確認していただくと、hover時に指定のhoverClass(この例では「hover」)が#dropに付加されていることがわかると思います。

ただし、このとき.hoverに対して指定されている背景色(background: blue;)は適用されません。
適用されない理由は「CSSの詳細度」という規則によるものです。

参考:詳細度 - CSS | MDN

上記URLにある通り、id指定はクラス指定よりも詳細度が高くなるため、.hoverに指定した背景色よりも#dropに指定した背景色(background: yellow;)の方が優先して適用されることになります。

試しに、.hoverに対するCSSを以下のようにしていただくと、背景色が青くなることをご確認いただけるかと思います。

lang

1#drop.hover { /* idセレクタを付与して詳細度を上げる */ 2 background: blue; 3 }

以上、ご参考になれば幸いです。

投稿2015/04/09 07:32

hotsecret

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MAYAKO

2015/04/09 07:51

hotsecret様 ご回答ありがとうございます。 早速適応して常用しているChromeのブラウザで確認してみたら、問題なくhoverClassとtoleranceが動作しました! なるほど……詳細度は、確かタグにスタイルを適応する上での優先順位のようなものでしたよね。 !importantが一番優先度が高く、次にid(#~)、その下にclass(.~)だった気がします。 その点について記憶が怪しくなってきておりましたので、復習になりました。 また、Javascriptコンソールはともかく、デベロッパーコンソールは本日初めて使ってみましたが、スクリプトを実行した際の動きを確認する上でとても重要な機能ですね。 今後どんどん使っていきたいと思います。 以上より、hotsecret様を早速、ベストアンサーにさせていただき、質問を〆させていただきます。 丁寧にご解説およびご助言いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問