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

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

ただいまの
回答率

90.47%

  • HTML5

    4177questions

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

  • CSS3

    2138questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

thタグにマウスオーバーしたら、ふわっと枠線の色が変わるエフェクトを付けたい

解決済

回答 3

投稿 編集

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

shoi

score 73

現在の実装では、thタグにマウスオーバーしたら枠線を青色に変えるという実装をしています。
ソースは下記の通りです。
table.dataTable thead th {
        text-align: center;
        padding: 3px 0px 3px 0px;
        border: 2px solid #292929;
        font-weight: bold;
        color: white;
        background-image: -webkit-gradient(
        linear,
        left top,left bottom,
        from(black),
        to(#353535));

        cursor: pointer;
}

table.dataTable thead th:hover {
    border: 2px groove DeepSkyBlue;
}

枠線を青色に変える際に、ふわっと色を変えたいのですが方法が分かりません。
ご教授をお願いします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

table.dataTable thead th の中に transition: 0.4s ease all; とか加えればふわっと変化すると思います

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/03/12 09:50

    因みにease allとは何のことですか?

    キャンセル

+2

"ふわっと"の表現にあってるかどうかはわかりませんが、"transition"とかはどうでしょうか。
"transition: 0.3s;" みたいな。。。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

border-styleについては、アニメーション不可のためhoverと同時に変わる事になると思います。
border-width,border-colorについては、アニメーション可ですのでtransition-durationで指定した時間をかけて徐々に変化します。

【アニメーション可/不可について】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animated_properties

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

関連した質問

  • 解決済

    Tableのtrごとに枠色を変えたい

    HTMLで作成したTableの行(tr)ごとに枠色を変えたいと思っています。 しかし現状では各行のborder-top-colorが、 1つ前の行のborder-bottom-co

  • 解決済

    【HTML,CSS,jQuery】display:table系でのマージンやサイズの指定方法

    現在,研究でWebでの推薦システムを構築しております. そのプロトタイプを作成しているのですが,HTML5を全く勉強したことがなかったため,少し真似しながら作ってみようと,表を <

  • 解決済

    1つのdiv要素を中央に寄せたい

    現在、cssでectファイルの中のものを中央寄せにしようとしています。 ectファイルの中身は以下の通りで、 alertbackはアラートが出た際にalertboxの周りを黒くする

  • 受付中

    HTMLでテーブルが崩れてしまいます。

    グーグルchromeの場合は、なんともないのですが IEを使うと少しだけtheadがずれてしまいます。 直す方法を教えていただきたいです。 サイトのリンク IEバージョン:1

  • 解決済

    HTML CSS Table内の文字をセンタリング中央寄せをしたい。

    Table内の文字をセンタリング中央寄せをしたいのですが、いろいろなプロパティを設定しても 文字が上下左右にセンタリングされません、解決方法はありますでしょうか... --HTM

  • 解決済

    cssのレイアウト

    上記のような構成で1ラインとして1ラインを1リンクとして、下方向に並べていきたいです。 display-inlineでもうまくいかず、 display-tableでも上下のマス

  • 解決済

    CSSのドロップダウンメニューの作り方

    ドロップダウンメニューのサンプルコードです。 以下の部分ですが、これでどうやってメニューを形成しているのかまだつかめません。詳細な解説をお願いします。 #menu:before

  • 受付中

    HTMLのrowspanを使

    ブラウザはIE11です。 1つのTABLEタグが複数のペー

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

  • HTML5

    4177questions

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

  • CSS3

    2138questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。