PSO2公式 RSS
    --------(--)

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。
    2015-11-25(Wed)

    クラス追加・削除による擬似クラス維持


    こんにちは、saltです。

    最近はcss・htmlいじりにはまっています。

    pso2チームブログで複数枚の画像がスクロールするものを作ってみました。
    完成版?はこちら (ヘッダー部分がそうです)

    今回は、その時つまづいた部分を書いて置きます。

    といっても何個かあったので、ボタンで画像が切り替わる部分のみにします。
     ↓この部分





    ボタンを押すとボタンに対応した画像までスクロールするというもの。
    ただ、↑のサンプルを使ってみると分かると思いますが、
    ボタンの色で現在位置を示してはいるものの、一度通ると色が固定されてしまっています

    色が変わった後、マウスをボタンの上にあわせてもhoverが発動しないではないか!!

    最初は↓こんな感じで色を変えていました。
    element.style.backgroundColor = "#db7093";

    何が問題だったかというと、javascriptでstyleを変更すると、
    hoverなどの擬似クラスが反映されなくなるようです。上書きされるみたいな?

    そこで、試行錯誤の末、
    色を保存したクラスを追加&削除で変更すれば、
    hoverを保持したまま色変更ができることがわかりました。
    ググっても意外に出てこなかったので時間かかりました。
    (jQueryならすぐにできそうだったのですが、なんか負けた気がして・・・)

    cssで色変更のクラスを作ります
    .acolor{
    background-color:#db7093;
    }


    変更するときはこんな感じ↓
    // 色変更
    element.classList.add("acolor");
    // 元の状態に戻す
    element.classList.remove("acolor");

    classListを使ってクラスの追加・削除をしています。


    修正版がこちら↓




    しっかりhoverが維持されて、マウスを乗せた時に色が変わりますね。
    分かればなんということでもないですね。

    さて、ここまで書きましたが、jQueryだとhoverを直接いじれる関数があるようです。
    私はjQuery使ったことないんですよね(恥ずかしながら・・・)
    jQueryに乗り換えなければならないのですかね。
    短くかけるのはいいことのはずなんだけどな~乗り気になれない。
    ではまた~ノシ
    スポンサーサイト

    コメントの投稿

    管理者にだけ表示を許可する

    コメント

    プロフィール

    Author:salt
    saltの自由なブログへようこそ!
    週一ぐらい?で更新してます。

    ・好きなこと
       ゲーム
       アニメ鑑賞(ゼロ魔とか

    ・好きなゲーム
       太鼓の達人
       ドラゴンクエスト(Ⅹ以外は好き
       イース
       軌跡シリーズ
       etc...


    PSO2もやってます。プレイヤー名はSALT40(SALT400)です。
    シップは8です。
    よかったらフレ登録してね。

    PSO2関連のコメントあればうれしいです。
    PSN:saltp40

    カテゴリ
    最新記事
    最新コメント
    月別アーカイブ
    検索フォーム
    リンク
    スポンサーサイト
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。