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

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

ただいまの
回答率

90.77%

  • JavaScript

    15344questions

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

  • jQuery

    6340questions

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

Jqueryでbackground-colorを変更する

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,332

SugiuraY

score 172

現在、
→ダブルリックした要素は
css('background-color','#bbbbbb')で据え置く

→hoverされた要素は
mouseenter時は
css('background-color','#abfeb6');
mouseleave時は
$(this).css('background-color','');

→ただしダブルクリックされた要素で#bbbbbbになっているものは
mouseenter時は
css('background-color','#abfeb6');
mouseleave時は
css('background-color','#bbbbbb');

としたいと考えております。
つまり、一度灰色(#bbbbbb)にしたものは、hoverされてポインタが載っている時は色が変わって欲しいけれども
ポインタが離れた時には無色になって欲しくない(灰色のままでいて欲しい)ということになります。

これについて、下記のコードで対応ができなかったのですが、
どこに問題があるのでしょうか。

ブラウザ環境:Chrome バージョン: 62.0.3202.75

<div class="elements">xxxxx<div>

$(function(){
$('.elements').hover(function(){
  $(this).css('background-color','#abfeb6');
}, function() {
  if ($(this).css("background-color")=="rgb(187,187,187)"||$(this).css("background-color")=="hex(#bbbbbb)") {
    $(this).css('background-color', 'rgb(187,187,187)');
  }else{
  $(this).css('background-color','');
  }
});
});


$(function(){
$('.elements').on('dblclick',function(){
    $(this).css('background-color','#bbbbbb');
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

色の変化についてはclassの付け替えとcssでやったほうが良いのでは?

.elements:hover,.elements.gray:hover{
  background-color:#abfeb6;
}
.elements.gray{
  background-color:#bbbbbb;
}
$(function(){
  $('.elements').on('dblclick',function(){
    $(this).addClass('gray');
  });
});
<div class="elements">xxxxx<div>

 追記

.elements動的に作成して処理したいとのことなので以下修正版です

/* 変更なし */
.elements:hover,.elements.gray:hover{
  background-color:#abfeb6;
}
.elements.gray{
  background-color:#bbbbbb;
}
$(function(){
  /* elements追加処理、適当なので状況にあわせて要修正 */
  $('input[type=button][value=add]').on('click',function(){
    $('#testarea').append($('<div>').addClass('elements').text('xxxxx'));
  });
  /* dblclick処理はセレクタを修正 */
  $(document).on('dblclick','.elements',function(){
    $(this).addClass('gray');
  });
});
<!-- addボタンをおすと.elementsが#testareaに追加されます-->
<input type="button" value="add">
<div id="testarea">
<div class="elements">xxxxx</div>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 11:55

    コメントを頂き、有難うございます。
    動的に生成された要素で既存のcssを適用させる方法が調べてもうまく動作させることができなかったため、そのあぷろーちはあきらめておりました。もう一度調べてみます。
    もう一度調べてみます。

    キャンセル

  • 2017/11/02 12:18

    > 動的に生成された要素で既存のcssを適用させる方法

    動的要素でも自動的にcssは反映されると思います
    念のため動的処理を前提に修正版を追記しておきました

    キャンセル

  • 2017/11/02 13:29

    yambejp様
    ご丁寧に有難うございます。
    仰るとおり、問題なくCSSが反映されておりました。
    動的に生成された場合反映されたのは他の点に問題があったからかと思いますので
    個別に検証してみます。

    キャンセル

checkベストアンサー

0

JavaScriptだけでやるならフラグをつけるとかする必要があります。
if ($(this).css("background-color")=="rgb(187,187,187)"||$(this).css("background-color")=="hex(#bbbbbb)") { この部分では必ず #abfeb6 の rgb(171, 254, 182) が返ってくるため判別できません。( rgb(187, 187, 187) で判別すればダブルクリック1回目は通りますが、2回目にダブルクリックしなければ消えます)

$(function(){
  $('.elements').on('dblclick',function(){
      $(this).css('background-color','#bbbbbb');
  });
});
.elements:hover {
  background-color:#abfeb6 !important;
}

動くサンプル:https://jsfiddle.net/pwm45cpz/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 12:11

    コメント有難うございます。
    無理にJSで複雑化させていました。
    一番シンプルな方法で、解決することができました。また、CSSが不案内であまりimportantを気にしたことがなかったのですが、挙動が重複するときに優先順位をつけることができるのですね、この機会に勉強してみます!
    宜しくお願い申し上げます。

    キャンセル

0

単純にこの記述だとif文のtrueに引っ掛かりません。

まずダブルクリックで色を#bbbbbbに変更しますね。
そしてhover時に色を#abfeb6に変更するのと同時に、ダブルクリックした時の#bbbbbbがいなくなります。
その後のfunction内if文突入時のbackground-colorは100%「#abfeb6」です。
なのでこのif文は100%false判定しかされません。

他の方法もありますが、このままの記述でやりたいのだとすれば、以下解決方法です。

$(function() {
 var bgColor;
 $('.elements').on('dblclick',function(){
    $(this).css('background-color','#bbbbbb');
  bgColor = $(this).css('background-color');
 });

  $('.elements').hover(function() {
    $(this).css('background-color','#abfeb6');
  }, function() {
      if (bgColor == "rgb(187,187,187)" || $(this).css('background-color' == "hex(#bbbbbb)") {
        $(this).css('background-color', 'rgb(187,187,187)');
        bgColor = $(this).css('background-color'); 
      } else {
        $(this).css('background-color','');
        bgColor = $(this).css('background-color');
      }
  });
});


hoverして変更する前のbackground-colorを変数に残しておきます。
out時の戻す処理の際に、そのもともとの色を判定してあげれば良い思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 11:43

    bgColor がスコープをまたいで利用されているので、このままでは動きませんよ。

    キャンセル

  • 2017/11/02 11:47

    bgColorを外に出す必要がありますね・・・。
    ご指摘ありがとうございます。

    キャンセル

  • 2017/11/02 11:51

    コメントを頂き、有難うございます。確かにhoverした瞬間に色が変わってしまっているので、判定ができない点と、それでは常にifの評価もfalseが返ってくることは理解できました。
    一方で、それぞれのfunction(enter時とleave時)はローカルスコープのため、var bgColorを設定しても後の判定式でundefinedになるのではないでしょうか?

    キャンセル

  • 2017/11/02 11:52

    すみません、ちょうどコメントが重複してしまいました、ご放念下さい。

    キャンセル

  • 2017/11/02 12:08

    hover時の$(this).css('background-color')を取得したいので、外に出すことは可能なのでしょうか。。
    せっかく教えて頂いたのに、方法が思いつかなかったため、コメントをさせていただきました。

    キャンセル

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

  • ただいまの回答率 90.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    html要素にオンマウスしても背景色が変更できない

    html要素にオンマウスするとアニメーションつきで背景色を変更する処理、について質問です。 下記のソースは、オンマウスした要素のbackground-colorを取得し、配列co

  • 解決済

    infinite scrollについて

    railsで.hoverを使っているコンテンツをinfinitescrollで表示させているのですが、スクロールして後から読み込まれてくるコンテンツに.hoverが効いてくれません

  • 解決済

    jQueryによるメニュー切り替え時の不具合

    jQueryの質問になります。 JSの経験がほぼないため、具体的な修正方法を教えていただければと思います。 ウィンドウサイズが860以上の場合は横並びメニューを表示(親メニ

  • 解決済

    複数タグのイベントハンドラ

    前提・実現したいこと WEBデザインを勉強中のものです。 複数のinputタグにonmouseoverでスタイルを変える方法がわかりません。inputタグのonmouseove

  • 解決済

    一部だけリンク色を変更したい

    前提・実現したいこと 全体をaタグで囲っています。 オンマウス時にボタンの部分だけ色を変えたいです。 ::selection要素で変更すると思うのですがうまくいき

  • 受付中

    イベントバブリングしない理由

    下記ソースは、pを監視しています。 <div id="superParent"> <p id="parent"><span id="child">あいうえお(false/バブ

  • 解決済

    画面に表示させた文字と同じ文字をlocalstorageから削除したい

    前提・実現したいこと 現在、メモ帳を作成しているところです。 考えている仕様としては、タイトル・内容をlocalstorageに保存できるものを作成したいと考えています。 入

  • 解決済

    関数の定義と呼び出しの記述について

    実現したいこと スタートボタンを押すとpairsで定義した全ての枚数のカードが裏返しになる。 現状 スタートボタンを押しても何も変化なし。 ソースコード html <!

同じタグがついた質問を見る

  • JavaScript

    15344questions

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

  • jQuery

    6340questions

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